从容器中删除(而不是隐藏)许多 div 的溢出，或者限制容器的数量? [英] Remove (not hide) overflow of many divs from container, or constrain amount to container?

问题描述

我想制作一个背景，根据容器的大小添加和删除方形 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 的溢出，或者限制容器的数量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！