1

サイトの画像を配置するために jQuery Masonry を使用しています。すべての画像の幅は同じですが、高さが異なります。それらがロードされる順序に応じて配置されますが、奇妙です。

これは私が得るものです：

私が得るもの

そして、これは私が欲しいものです:

私が欲しいもの

これは jQuery で修正する必要がありますか、それともサーバーから PHP でロードされる順序を何らかの方法で変更する必要がありますか? ではどうやって？

これまでのコード:

var $container = $('#imageAlbum');

$container.imagesLoaded( function(){
  $container.masonry({
      itemSelector : '.image'
      columnWidth: 230;
  });

});

画像のCSS

.image{
     margin: 10px;
     float: left;
     width: 230px;
}

追加した

jsFiddle を作成しました: http://jsfiddle.net/DXCDv/2/

4

1 に答える 1

0

典型的な問題、典型的な解決策はこちら. 開発中の jsfiddle、jsbin、またはオンライン サンドボックスを共有すると、デバッグが容易になります。

更新高さを指定するのを忘れました。組積造には幅と高さが必要です。変更された fiddleを参照してください。画像を動的に読み込む場合は、imagesLoaded メソッドを使用する必要があります。このメソッドは、画像が読み込まれた後に Masonryをトリガーし、プラグインが画像の幅と高さを正しく認識してレイアウトできるようにします。

于 2012-10-01T20:02:32.060 に答える