0

http://jsfiddle.net/XMdYw/7/の下にjQueryがあります 

var elements = '';
var ELEMENT_COUNT_PER_PAGE = 301;
var page = 1;

for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
    elements+= '<div class="imgwrap"><img src="lq/'+i+'.jpg" class="image-'+i+'"/></div>'
}

$('.imagecontainer').append(elements).masonry();​

それに関する問題は、画像が重なっていることです。ページを更新した後、修正されますが、サイトが完全に再割り当てされると、再び問題が発生します。

部分的に動作します

部分的に機能すると言う理由は、imgにdiv.imgwrapラップがないためです。

var elements = '';
var ELEMENT_COUNT_PER_PAGE = 301;
var page = 1;

for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
    elements+= '<img src="lq/'+i+'.jpg" class="image-'+i+'"/>'
}
var $img = $(elements);
$img.on('load', function() {
    $('.imagecontainer').masonry('reload');
});
$('.imagecontainer').append(elements).masonry();

以下を試してみました

    var elements = '';
    var ELEMENT_COUNT_PER_PAGE = 301;
    var page = 1;

    for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
        elements+= '<div class="imgwrap"><img src="lq/'+i+'.jpg" class="image-'+i+'"/></div>'
if(i==301){
$('.imagecontainer').masonry('reload');​
}
    }

    $('.imagecontainer').append(elements).masonry();​

そして私も試しました

    var elements = '';
    var ELEMENT_COUNT_PER_PAGE = 301;
    var page = 1;

    for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
        elements+= '<div class="imgwrap"><img src="lq/'+i+'.jpg" class="image-'+i+'"/></div>'
    }
var $imgs = $(elements);

    $('.imagecontainer').append($imgs).masonry( 'appended', $imgs );

それで

追加が完了したときにキャッチして.masonry();、divラップを持つimgで適用する方法はありますか？

さらに

window.setTimeoutも解決策ですが、2秒以内に画像が読み込まれず、重複する画像を長時間見ても魅力的ではない場合があります。

4

1 に答える 1

1
  1. 画像に高さとウィットを追加してから、石積みを追加することをお勧めします。
  2. すべての画像を追加した後、masonry.reload（）関数を呼び出します。
  3. 画像の読み込みに時間がかかりすぎる場合は、石積みのドキュメントに記載されているように、画像を読み込んだ関数を使用してください
于 2012-06-21T18:15:57.877 に答える