![the the](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了从容器中删除(而不是隐藏)许多 div 的溢出,或者限制容器的数量?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想制作一个背景,根据容器的大小添加和删除方形 div,这会受到调整窗口大小的影响.
要添加 div,我遵循了这篇文章中的示例 这里.但是,调整屏幕大小会继续增加 div 的数量.有没有办法将正方形的数量限制为容器的大小,或者去除溢出?
(我不想简单地使用 css overflow:hidden,因为这并不能解决十亿个 div 相乘的问题.)而且我是一个绝对的 javascript 新手,所以请耐心等待!
let contains = document.getElementById("squareContain");让宽度 = contains.offsetWidth;让高度 = contains.offsetHeight;var 容器面积 = 宽度 * 高度;var canAdd = Math.floor(containerArea/1600);//对于40px x 40px的方块函数乘法节点(节点,计数,深){for (var i = 0, copy; i < count - 1; i++) {copy = node.cloneNode(deep);node.parentNode.insertBefore(复制,节点);}}$(window).on(resize", function(){乘法节点(document.querySelector('.square'), canAdd, false);}).resize();
编辑jsfiddle
解决方案
目前你只计算一次适合多少个正方形,但每次窗口大小改变时都需要重新计算:
let contains = document.getElementById("squareContain");函数 canAdd(){let square = contains.children[0],cWidth = contains.offsetWidth,cHeight = contains.offsetHeight,sWidth = square.offsetWidth,sHeight = square.offsetHeight;返回 Math.floor(cWidth/sWidth) * Math.floor(cHeight/sHeight);}函数乘法节点(节点,计数,深){if (contain.children.length == count)返回;if (contain.children.length < count){for (var i = 0, copy; i < count - 1; i++) {copy = node.cloneNode(deep);node.parentNode.insertBefore(复制,节点);}}别的{while(contain.children.length > count){contains.removeChild(contain.children[contain.children.length -1]);}}}$(window).on("resize", function(){multiplyNode(contain.querySelector('.square'), canAdd(), false);}).resize();
.square_container{背景颜色:#ccc;位置:固定;高度:100vh;宽度:100vw;显示:弹性;对齐内容:居中;对齐内容:开始;flex-wrap: 包裹;边距:0 自动;填充:0 自动;}.正方形{宽度:40px;高度:40px;背景颜色:蓝色;边框:1px纯红色;边距:0;填充:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="squareContain" class="square_container"><div class="square"></div><!--...等...-->
I want to make a background that adds and removes square divs based on the size of the container, which is affected by resizing the window.
To add the divs, I followed the examples on this post here. But, resizing the screen continues to multiply the number of divs. Is there a way to constrain the amount of squares to the size of the container, or to remove the overflow?
(I don't want to simply css overflow:hidden because that doesn't solve the problem of a billion divs being multiplied.) And I'm an absolute javascript newbie, so bear with me!
let contain = document.getElementById("squareContain");
let width = contain.offsetWidth;
let height = contain.offsetHeight;
var containerArea = width * height;
var canAdd = Math.floor(containerArea/1600); //For 40px x 40px squares
function multiplyNode(node, count, deep) {
for (var i = 0, copy; i < count - 1; i++) {
copy = node.cloneNode(deep);
node.parentNode.insertBefore(copy, node);
}
}
$(window).on("resize", function(){
multiplyNode(document.querySelector('.square'), canAdd, false);
}).resize();
Edit jsfiddle
解决方案
Currently you only calculate how many squares fit once, but you need recalculate each time window size changed:
let contain = document.getElementById("squareContain");
function canAdd()
{
let square = contain.children[0],
cWidth = contain.offsetWidth,
cHeight = contain.offsetHeight,
sWidth = square.offsetWidth,
sHeight = square.offsetHeight;
return Math.floor(cWidth / sWidth) * Math.floor(cHeight / sHeight);
}
function multiplyNode(node, count, deep) {
if (contain.children.length == count)
return;
if (contain.children.length < count)
{
for (var i = 0, copy; i < count - 1; i++) {
copy = node.cloneNode(deep);
node.parentNode.insertBefore(copy, node);
}
}
else
{
while(contain.children.length > count)
{
contain.removeChild(contain.children[contain.children.length -1]);
}
}
}
$(window).on("resize", function(){
multiplyNode(contain.querySelector('.square'), canAdd(), false);
}).resize();
.square_container{
background-color: #ccc;
position: fixed;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-content: start;
flex-wrap: wrap;
margin: 0 auto;
padding: 0 auto;
}
.square{
width: 40px;
height: 40px;
background-color: blue;
border: 1px solid red;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="squareContain" class="square_container">
<div class="square"></div><!--...etc...-->
</div>
这篇关于从容器中删除(而不是隐藏)许多 div 的溢出,或者限制容器的数量?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!