12

単純な石積みグリッドがあります。ロードすると、.contentクラスが表示されます。リロードすると、アイテムは互いに流れ込みます。

これはChromeとSafariでのみ発生し、Firefoxでは見栄えがします。

グリッドからのcssは次のとおりです。

#media_list {} 
#media_list .media_item  {  height: auto; width: 270px; display: inline-block; background: #f4f4f4; border: 1px solid #d9d7d5; float: left; padding: 10px 0px 10px 0px; font: 11px Helvetica Neue; }
#media_list .media_item .date { color: white;  background: #2f343a; padding: 10px 5px; width: 260px; float: left; margin: 0px 0px 15px 0px;}
#media_list .media_item .content { padding: 15px; float: left; display: inline-block; margin-bottom: 20px; }
#media_list .media_item img { border: 1px solid #dedddd;  margin: 0px 0px 10px 10px; width: 248px;}

これは石積みがどのように呼ばれるかです：

$('#media_list').masonry({  // options
                            itemSelector : '.media_item',
                            columnWidth : 300
                         });

min-height私はsとsでそれを回避することができますmarginが、それは動的ではなく、あまりきれいに見えません。

これがJSFiddleですが、実際には問題を再現していません。

4

2 に答える 2

37

すでにリロードを使用しているようです。おそらく、画像がリロードではなくURLの更新時にリロードされるためです。

試す：

var $container = $('#media_list');
$container.imagesLoaded(function(){
  $container.masonry({
        itemSelector : '.media_item',
        columnWidth : 300,
        gutterWidth: 20
  });
});

そうでなければ

$('#media_list').masonry({
    // options
    itemSelector : '.media_item',
    columnWidth : 300,
    gutterWidth: 20
}).masonry('reload');
于 2011-08-31T12:55:11.013 に答える
10

たとえば、Google Chromeとの互換性を高めるには、次のように変更します。

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

に

$(window).load(function(){ $('#media_list').masonry(); });
于 2014-02-08T22:30:15.840 に答える