html - Alignin div 就像 pinterest

Question

我已经搜索了很多东西，但就是找不到答案。也许你可以帮我。

我想像在 Pinterest 上那样对齐 div 元素。并非所有 div 的高度都相同，但装订线宽度保持不变。我正在设计一些东西，我也想对其进行编程。

这是我的意思的图像，以供澄清:http://nl.tinypic.com/r/ekkkte/8

Graphicburger.com 使用了我想做的相同的事情。我只是想知道如何将他的内容对齐。

Answer 1

好吧，实现这一目标的一种方法是使用 Masonry .我认为这就是 Pinterest 实际用于其布局的内容。这也恰好适用于 jQuery，如果你也在使用它的话。如果您正在寻找更多关于这背后的理论，请查看 this link

以下是来自 Masonry 插件/库链接的演示代码:

HTML

<div id="container">
  <div class="item">...</div>
  <div class="item w2">...</div>
  <div class="item">...</div>
  ...
</div>

<script src="/path/to/masonry.pkgd.min.js"></script>

CSS

.item { width: 25%; }
.item.w2 { width: 50%; }

Javascript

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});