Question

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

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。

Answer 2

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

http://salvattore.com/

Answer 3

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

Answer 4

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

CSS系统替代砌体

4 个答案: