CSS系统替代砌体

Question

我记得一个CSS网格系统替代砌体（香草）http://masonry.desandro.com/。该网站是黑色背景，显示/排列彩色框（元素周期表元素）。它还具有基于其形状和大小的过滤框（如圆形，方形等）。它还使用硬件加速。我花了很多时间找到它，但没有运气。有人知道这个网站吗？

Answer 1

我正在使用这个。它与Bootstrap配合得很好。基本上，我使用的是WALL，而不是容器：

<style>
.wall {
    width: 100%;
    padding: 0 20px;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
} 
.wall > .brick {
    display: inline-block;
    width: 100%;
}
@media screen and (min-width:860px) {
    .wall {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
}
@media screen and (min-width:1280px) {
    .wall {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3;}
}
@media screen and (min-width:1700px) {
    .wall {-moz-column-count: 4; -webkit-column-count: 4; column-count: 4;}
}
</style>    

这是为了砖块必须至少为 400px。如果你不喜欢 400，你可以做数学并更改min-width s。

Answer 2

我会尝试Salvattore，它使用CSS进行配置和所有设计，甚至不需要接触JavaScript。

http://salvattore.com/

Answer 3

为什么不检查其对应物同位素的来源：http://isotope.metafizzy.co/index.html

Answer 4

如果有人觉得有用，这是另一种选择： http://suprb.com/apps/nested/