0

Masonry と Infinite Scroll を使用していますが、以下のコードが機能しません。HTML で何かを忘れたのですか? 全商品一挙表示！

<div id="containerPost">
<div id="post119" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 1</p>
</div>
<div id="post118" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 2</p>
</div>
<div id="post117" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 3</p>
</div>
<div id="post116" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 4</p>
</div>
... and so on


    var $container = $('#containerPost');
$container.infinitescroll({
        navSelector  : '.pagination',    
        nextSelector : '.pagination a',
        itemSelector : '.item',
        loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
    function( newElements ) {
        var newElems = $( newElements );
        newElems.css({ opacity: 0 });
        newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', newElems); 
    }
);
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item'
    });
})

ご協力いただきありがとうございます...

クリス

4

1 に答える 1

0

石積みは現在作業中です。

これの代わりに：

$container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.item'
        });
    })

http://masonry.desandro.com/のドキュメントからこれを使用します。

$container.masonry({
       itemSelector: '.item'
    });

imagesloaded プラグインを使用するには、おそらく別の関数を使用する必要があります。

更新されたフィドルを表示

于 2013-07-28T18:09:14.953 に答える