18

このサイトでアイソトープを設定しようとしています。レイアウトを処理する必要があり、コンテナにアイテムを追加できる必要があります。

問題は、画像を適切に初期化していないように見えることです。これを初期化する方法は次のとおりです。

$(document).ready(function(){

    var $container = $('#container');
    $container.isotope({
          masonry: {
            columnWidth: 400,
            gutterWidth: 10
        },
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: true
        },
        resizesContainer: true,
    });

    load_more();
});

画像は石工オプションの影響を完全に受けません。CSS で「幅」を指定すると、ロードの問題が発生します。

load_more は ajax 呼び出しを実行し、成功すると返されたデータでこの関数を呼び出します。

function data_loaded(data) {

    var newItems = "";
    for (var i = 0; i < data['posts'].length; i++) {
        newItems += '<div class="item" ><img class="gallery_img" src="'+data['posts'][i]['images'][0]['path']+'" /></div>';
    }

    /* append images*/
    var $newItemsObj = $(newItems);
    $('#container').isotope( 'insert', $newItemsObj );
}

サイトは http://www.hotchinesebabes.com/です。 このサイトは安全に作業できます。ヌード画像はありません。

また、サイトを適切に読み込むには更新が必要なようです.2回目に画像がキャッチされると思います.

4

1 に答える 1