私は石積みと、実際にはライブラリを使用しない無限スクロールの一種のバージョンを使用しています。最初の画像は正しくレイアウトされますが、追加された画像はそうではありません..それらは行に追加されるだけです.
これは、位置を選択するための高さ/幅のプロパティを持たない文字列から読み込まれるためだと思います。あらかじめ決められたサイズのdivでそれらをラップすると、正しくレイアウトに入るからだと思います(ただし、画像はすべて異なる高さになります)
石積みをレイアウトに正しく適用する一連の画像がページロードに設定されています。
次に、SQL への PHP 呼び出しを使用して、画像パスの配列を収集し、これを JavaScript 配列に変換します。
var images = [
<?php
foreach ($images as $image) {
echo "'/$image',\n";
} ?>
];
$(images).each(function() {
var image = $('<img />').attr('src', this);
});
</script>
次に、石積みの追加を使用して、トリガー イベントで一度に 5 つずつ読み込みます。
$appendage += '<div class="box append"><img src="' + images[i] + '" /></div>';
count++;
}
var $container = $('#result');
$container.append( $appendage ).masonry( 'appended', $appendage );
画像をプリロードするためのあらゆる種類のスキームを試しましたが、役に立ちませんでした..
$(images).each(function() {
(new Image).src = this;
});
誰もが方法を提案できますか?おそらく、画像パスのデータベースから、一番下までスクロールしたときに追加として石積みに読み込まれる画像に移動するためのより良いアプローチです
ありがとう!