【问题标题】: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/

    【讨论】:

      猜你喜欢
      • 2015-08-09
      • 2013-12-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-10-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多