CSS 系统替代 Masonry答案

【问题标题】：CSS system alternative to MasonryCSS 系统替代 Masonry
【发布时间】：2012-12-08 16:43:27
【问题描述】：

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

【问题讨论】：

请使用合适的搜索引擎和专为搜索网站而设计的工具。
在这里我不是要你们给我找一个随机的网站/代码。我问的是 CSS 系统的名称，它是 Masonry 的直接替代品，它已经存在，我只是忘记了它的名字。我什至没有问“是否有这样的系统”。所以我相信我的问题是合法的。
我从这个问题中得到了价值，因为我一直在寻找同位素。不过，问题可能会更好。

标签： jquery css css-transitions jquery-masonry

【解决方案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>

这样设计的砖块必须至少为 400 像素。如果您不喜欢 400，可以进行数学运算并更改 min-widths。

【讨论】：

Tnx，但在 IE 9 中呢

【解决方案2】：

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

http://salvattore.com/

【讨论】：

【解决方案3】：

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

【讨论】：

不知道是同一个人

【解决方案4】：

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

【讨论】：