javascript - 有没有更聪明的方法来替换这个 CSS 列 JS？

Question

所以我的应用程序由向左浮动的小方 block (固定大小)组成。当列数的宽度和间距与窗口大小匹配时，它看起来很棒。

 | [] [] [] [] |

如果没有，则右侧有一个大空间。

 | [] [] [] []   |

我尝试使用 CSS 列来解决此问题，该列将从上到下显示您的内容。我想从左到右。

所以我用一些 javascript 模拟了从左到右的列行为，基本上是从列的总宽度与容器的宽度之间的差异中获取剩余宽度。我认为我真正想要的是找到一种获取列数的优雅方法。

$(window).resize(function() {
    var totalGridWidth = $("#grid").width();
    var videoWidth = $(".square").width();

    var spaceRatio = (totalGridWidth-scrollbarWidth)/videoWidth;
    var currCols = parseInt((spaceRatio).toString().split(".")[0]);
    var colLeftOverSpace = parseFloat("0."+(spaceRatio).toString().split(".")[1]);
    var num = colLeftOverSpace * (videoWidth/currCols);

    $(".square").css("margin-right", num/2 +"px").css("margin-left", num/2 +"px");
});

演示:http://jsfiddle.net/ra3t2gub/ (调整宽度)

有没有更优雅的方法来做到这一点？我有点尴尬。

Answer 1

查看 flexbox ! (当您阅读时，我会写一个更深入的答案)

这是您等待时的一个非常简单的示例 - Codepen.io

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  display: block;
  width: 200px;
  height: 200px;
  background: #CCC;
  margin: 5px;
}