3

これがここに数回投稿されているのを見たことがありますが、どちらも機能する解決策がありませんでした.

jquery masonryを使用して、内部に画像とキャプションを含む多くの div をレイアウトしています。

「height:auto;」を設定しました 石積みの各アイテムの css 用。ウィンドウが読み込まれると、石積みが有効になり、コンテンツが適切にレイアウトされると予想していました。残念ながら、4 列でロードされますが、画像の高さがすべて重なっています。cssの高さをpxで設定すると機能しますが、ウェブサイトはレスポンシブであり、各メディアクエリで css の高さを変更したくないため、できれば自動で高さが必要です...

どんな助けにも感謝します:)

ありがとう

JS コードは次のとおりです。

    $(window).load(function()
{
    var columns    = 4,
        setColumns = function() { columns = $( window ).width() > 700 ? 4 : $( window ).width() > 480 ? 2 : 1 };

    setColumns();
    $( window ).resize( setColumns );

    $( '#container' ).masonry(
    {
        itemSelector: '.item',
        gutterWidth: 66,
        isFitWidth: true,
        isAnimated: true,
        columnWidth:  function( containerWidth ) { return containerWidth / columns; }
    });
});
4

3 に答える 3

5

必ず imagesLoaded を使用する必要があります: http://imagesloaded.desandro.com/

次のように実装されます。

  //le masonry
  var freeMasonry = $('.masonry');

  freeMasonry.imagesLoaded()
    .done(function(){
      freeMasonry.masonry({
        itemSelector: 'img'
      });
    });
于 2014-11-15T00:20:31.040 に答える