照片网格列布局

Question

我想用div制作网格，我想确保它们都具有相同的宽度但不同的高度。我确实希望它们包装，但不是在一条新线上，而是在第一个可用的空间位置。如果您需要任何解释，请告诉我们！

这几乎就是这个想法：http://imgur.com/a/WmUya

或者这个：

]

我只需要一个简单的解释！谢谢！

Answer 1

纯CSS解决方案（没有Javascript的砌体布局）

现在也可以在没有使用column-count的javascript的情况下执行此操作（请查看this tutorial）

＆＃13;

＆＃13;

.masonry {
  column-count: 3;
  column-gap: 5px;
}
img {
  break-inside: avoid;
  width: 100%;
}

＆＃13;

<div class="masonry">
  <img src="http://lorempixel.com/100/200/abstract" alt>
  <img src="http://lorempixel.com/g/100/250/abstract" alt>
  <img src="http://lorempixel.com/100/130/abstract" alt>
  <img src="http://lorempixel.com/g/100/240/abstract" alt>
  <img src="http://lorempixel.com/100/220/abstract" alt>
  <img src="http://lorempixel.com/100/180/abstract" alt>
  <img src="http://lorempixel.com/100/210/abstract" alt>
  <img src="http://lorempixel.com/g/100/170/abstract" alt>
</div>

＆＃13;

＆＃13;

＆＃13;

使用Javascript

您会发现一个较为流行的旧解决方案是使用masonry库 - 请参阅this example。

它需要的所有代码是：

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

Answer 2

Isotope javascript plugin具有完全符合您要求的布局模式。您可以使用示例预览布局。如果您没有任何javascript技能，则可以使用数据属性。

Answer 3

我制作这样的方式首先要仔细查看你的图像，你会注意到3列。

此3列是 float 和 width：33.33％中的3个不同div的容器或生成相同结果的内联块

在此列中，您的商品是高度：自动，尽管div总是以这样的方式工作。

这个花哨的空白区域由这段代码完成

// update the value in your convenience
border: 4px solid transparent;
box-sizing: border-box;

我们使用border而不是使用margin或padding。此边框将充当独立填充，不会扩展div中的背景颜色，同时不会在将其推出设计的项目之外创建边距。这将保留 33.33％宽度外观。

希望有所帮助