Javascript 创建砌体布局

我期待建立了一个简单版本的砌体布局的图像画廊我正在建设。我想使用flexbox并利用flex方向列和行换行来创建大部分布局

我想实现的最大功能是，客户可以设置他们想要的图像库列数

我想用JavaScript计算容器的高度，这样当他们选择一个不同的选项，如25%、33%或50%时，它就会创建布局。我有一个相当简单的版本工作，但我希望画廊是尽可能对称。我现在做的是找到所有图像的宽度，然后将它们相加。然后我将该数字除以所需的列数，然后将该高度添加到砌体容器中。这是确定容器高度的最佳方法吗

(function() {
  var width = 0;
  var curr_height = 0;
  var max_height = 0;

  $('.image-wrapper img').each(function() {
    width += $(this).width();
    curr_height = $(this).height();
     if (curr_height > max_height) {
       max_height = curr_height;
     }
  });

  var cols = 33.3333
  console.log(width, 'im the width')
  console.log(cols, 'im the num cols')
  console.log(max_height, 'im the max height')


  var containerHeight = (width * (cols / 100) - curr_height);
  console.log(containerHeight);


 $('.masonry-container').css('height', containerHeight);

})();

我在这里创建了一个JSFIDLE。

---

您可能想尝试使用。它支持方向或方向布局

您在这里使用的解决方案有效吗？如果是这样的话，这个问题可能会在网站上问得更好，但我会在他们的网站上问。使用CSS网格和区域不是更容易吗？是的，会的。我尝试不使用CSS网格的主要原因是我想支持IE11，我知道IE11目前只支持前缀