3

そうですね、これを説明するのは少し難しいですが、私が求めているのは次のとおりです。

HTML ページに入る投稿のデータベースがあります。明らかに、これらの投稿はすべて異なるサイズになるため、それらを含むボックスも異なるサイズになります.

私が求めているのは、たとえば下の図のように、これらのボックスがすべて互いにうまく収まるように見せる方法です。最初の投稿が小さい場合、たとえば、小さなボックスの行から始まります。また、必ずしもすべて同じ高さになるとは限りません。写真では、各投稿に番号が付けられており、投稿の配列内の位置を示しています。

ここで作成した図を参照してください。

ここに画像の説明を入力

これは可能ですか？おそらくそこにJavascriptが必要になると思いますが、JQueryが望ましいです。

助けてくれてありがとう。

4

1 に答える 1

3

Javascript ソリューションを使用する意思があるので、jQuery Masonryプラグインがさまざまな形の四角形の「最適な適合」を行うのに非常にうまく機能することがわかりました。

次のようなマークアップで設定します。

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

次に、 に Masonry ハンドラーをアタッチしfloat: leftます。.item#container

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    ...
  });
});

jQuery をまったく使用していない場合は、jQuery を使用しないバージョンもあります。

于 2012-05-20T11:41:45.160 に答える