1

「無限スクロール」効果を作成するために、jQuery組積造にアイテムを非常にうまく追加することができました。

Masonifiedコンテンツの前にコンテンツを追加するには、同様の戦略が有効だと素朴に思いました。

私はこのように石積みを設定します：

$(document).ready(function(){

   var $container = $('#pics');
        $container.imagesLoaded( 
        function(){
            $container.masonry({ 
            itemSelector : '.item',
            isFitWidth: true,
            isAnimated: true });
        });
});

元の画像はこのループ内に表示されます（JavaでPlayframework 1.2.4を使用）

<div id="pics" class="pics">
            #{list items:pics, as:'pic'}
                <div class="item">
                    <a href="https://s3.amazonaws.com/bucket/${pic.url}"/>
                    <img src="https://s3.amazonaws.com/bucket/${pic.url}" class="pic" style="height:${pic.height}">
                    </a>
                </div>
            #{/list}
</div>

そして、これは私が新しい写真を石工の「newpics」divに追加しているところです：

  $.each(data.files, function (index, file) {

var filename_leaf = milliTime+"-"+file.name;
var filename_stem = "https://s3.amazonaws.com/bucket/";
var filename = filename_stem+filename_leaf;

var newpic = "<div class='item'>"+
   "<a href='"+filename+"'>"+
   "<img src='"+filename+"'"+
   " class='pic' style='height:"+file.height+"'>"+
   "</a></div>";

$('#pics').prepend(newpic).masonry('reload');

 });

何が起こるかというと、写真は前に付けられますが、既存の写真よりも遅れています。

ページ全体を更新せずに#picsdivを更新/再読み込みする方法があれば、問題はほぼ解決します。私は探し続けるつもりですが、他の誰かがもっと良い方法を知っているのではないかと思います。

4

2 に答える 2

2

あなたの問題は石積みではありません。あなたのバグは、新しい写真がアップロードされると、高さの値が未定義になることです。これは、画像のマークアップが次のようになることを意味します。

<img style="height:undefined" class="pic" src="/photo.jpg">

ほとんどのブラウザは画像を取得するまで画像をレンダリングするため、これにより問題が発生しますheight: 0。そして、これがreload石積みモザイクを「バギー」にするものです（最初の新しい画像が高さであると見なしてモザイクを中継します0px）。

したがって、画像のの有効な値を取得していることを確認する必要がありますheight。または、画像が完全に読み込まれるまで待って、reloadメソッドをトリガーします。

于 2013-01-06T07:53:21.247 に答える
0

誰かがこれを見つけた場合に備えて。reload新しい要素を追加すると、現在のバージョンでは機能しません。を使用する必要がありますprepended。すべてのサイト参照のようreloadです。以前のバージョン用である必要があります。

msnry.prepended( elements )
// or with jQuery
$container.masonry( 'prepended', elements )

http://masonry.desandro.com/methods.html

于 2014-01-28T06:39:52.520 に答える