4

Masonry（Vanilla） http://masonry.desandro.com/に代わるCSSグリッドシステムを覚えています。そのサイトは黒の背景で、色付きのボックス（周期表の要素）を表示/配置していました。また、形状とサイズ（円形、正方形など）に基づいたフィルタリングボックスもありました。また、ハードウェアアクセラレーションを使用していました。私はそれを見つけるために多くの時間を費やしますが、運がありません。誰もがこのサイトを知っていますか？

4

4 に答える 4

6

私はこれを使用しています。また、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 以上になるように設計されています。min-width400 が気に入らない場合は、計算して s を変更できます。

于 2013-10-17T19:50:41.350 に答える
2

Salvattore を試してみたいと思います。設定とすべてのデザインに CSS を使用しており、JavaScript に触れる必要さえありません。

http://salvattore.com/

于 2013-08-09T02:21:55.120 に答える
1

誰かが便利だと思う場合の別の代替手段は次のとおりです。http://suprb.com/apps/nested/

于 2013-08-04T15:10:28.700 に答える
1

対応するアイソトープのソースを確認してみませんか: http://isotope.metafizzy.co/index.html

于 2012-12-08T17:07:02.193 に答える