1

wordpress サイト用のカスタム グリッド ベースのテーマを作成しようとしています。やりたいことの1つは、同じ列の投稿間の垂直方向の間隔が自動的に折りたたまれるようにして、投稿の高さが異なっていてもそれらの間に空きスペースがないようにすることです。

たとえば、このサイトでは、グリッドが希望どおりに折りたたまれています。ただし、このサイトでは、投稿は横一列に並べられており、各行の間にスペースがあります。

最初の例のサイトのように投稿を並べ替えるために使用される手法の名前はありますか? 少なくとも、その方法を学ぶためにGoogleで検索できる用語を探しています...しかし、この方法で自動配置されるグリッドを作成する方法を示すコードサンプルがさらに良いでしょう.

ありがとう！

4

1 に答える 1

4

これは、動的グリッドまたはおそらくPinterest のようなグリッド として知られています。Pinterestによって普及しました。

基本的に、CSS と HTML だけではこれを行うことはできません。このタイプのグリッドは、Javascript またはサーバー側の処理で処理する必要があります。Javascript を使用して、必要なことを正確に実行する多くの jQuery プラグインの 1 つをチェックすることをお勧めします(最初にリンクしたサイトでは、レイアウトにプラグインが使用されていることに注意してください)。

これらのどれでもうまくいくはずです。

Masonryでは、CSS を使用してコンテナの幅とブロック間の間隔を設定しています。Javascript で必要な列の幅を指定します。ブロックの幅と間隔の計算により、コンテナー内の列数が決まります。

WookmarkとBlocksItには、同様の構成オプションがあります。コンテナの幅を指定してから、ブロックの幅を指定できます。それとオフセット(ブロック間の距離) の間に、同じ幅の 3 つの列になるように配置することができます。

Freetileはそのままでは同じ幅の列(その機能の 1 つ) をサポートしていませんが、CSS を少し変更したり、プラグインを直接変更したりすることで、同じことを実現できます。

ここでの主な部分は、これらのプラグインの 1 つをセットアップして動作させることです。それが整ったら、好みに合わせて CSS を調整するだけです。これらの各プラグインは、実用的な例、コード サンプル、およびドキュメントを提供します。Masonry の単純な実装は次のようになります。

HTML:

<div id="grid-container">
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
</div>

CSS:

#grid-container {
    width: 940px; //width of your container
}
.post {
    margin: 10px; //spacing between each block/post
}

Javascript:

$('#grid-container').masonry({
    itemSelector: '.post', //selector for each block
    columnWidth: 300       //width of your columns
});

各ブロックポストは300px幅広で10px、周囲に余裕があります。最終的に 3 つの列になり、各列10pxの間に余白があります。

リストされている各プラグインは、個人的/商業的使用が無料であるような方法でライセンスされているため(それぞれのライセンスについては各プラグインを参照してください)、心配する必要はありません。

于 2013-01-24T02:59:28.137 に答える