Question

我正在为我正在建立的图像库构建一个简单的砌体布局版本。我想使用flexbox并利用flex-direction列和行换行来创建大部分布局。

我要实现的最大功能是客户将能够设置他们想要为图库提供多少列。

我想计算使用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);

})();

我在这里创建了一个JSFiddle。 https://jsfiddle.net/Lzyg5mos/2/

Answer 1

您可能想尝试使用react-photo-gallery。它支持column或row方向布局。

创建砌体布局

1 个答案: