html - 如何将 div 包装/捕捉/适合网格布局，俄罗斯方 block 风格？

Question

我很难用语言解释我在寻找什么，所以这里有一个例子:

http://jsfiddle.net/toaeb0zt/

<div style="width:800px ">
<div style="width:200px;height:500px; background:purple; float:left"></div>
<div style="width:200px;height:200px; background:blue; float:left"></div>
<div style="width:200px;height:200px; background:green; float:left"></div>
<div style="width:200px;height:400px; background:yellow; float:right"></div>
<div style="width:400px;height:200px; background:orange; float:left"></div>
<div style="width:200px;height:200px; background:brown; float:left"></div>
<div style="width:400px;height:200px; background:gray; float:left"></div>
<div style="width:200px;height:100px; background:red; float:left;"></div>
</div>

此布局是使用 CSS 组合左右浮动完成的。我阅读了有关 flexbox 的文章，看它是否可以做到，但似乎是负面的。

我意识到这可以通过将 div 嵌套到更大的 div 中来完成，但我需要使其具有响应性，而此解决方案将使响应成为一场噩梦。

我一直在努力远离 jQuery 和更深入的编程，但我知道它可能是最好的选择。我感谢这个社区的帮助；提前谢谢你。

Answer 1

你的所作所为在我看来就像一场噩梦!那里有很多库可以帮助您将这个网格放在一起。砌体网格最符合您的要求。

砖石工程的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像泥瓦匠在墙上安装石头。您可能已经在整个 Internet 上看到过它的使用。

我用了很多同位素!这是您可以使用 Isotope 做的许多事情之一: http://codepen.io/desandro/pen/mEinp

$( function() {

  $('.isotope').isotope({
    layoutMode: 'fitColumns',
    itemSelector: '.item'
  });
});

仔细研究网站

http://isotope.metafizzy.co/

希望这有帮助/这个解决方案将需要 JavaScript(和 jQuery)