javascript - start - Problemas de diseño del plugin Isotope Jquery

masonry isotope filter

Question

Estoy intentando configurar el isótopo en este sitio, necesita manejar el diseño y necesito poder agregar elementos al contenedor.

El problema es que parece que no se inicializan las imágenes correctamente, así es como lo inicio:

$(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();
});

Las imágenes no se ven afectadas por las opciones de mampostería, y si especifico "Ancho" en mi CSS tengo problemas de carga.

load_more realiza una llamada ajax y, en caso de éxito, llama a esta función con los datos devueltos:

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 );
}

El sitio es http://www.hotchinesebabes.com/ El sitio es seguro para el trabajo, no hay imágenes de desnudos

También parece que el sitio necesita una actualización para cargarse correctamente, supongo que las imágenes se quedan atrapadas la segunda vez, ¿entonces falla la primera vez debido al disparo del isótopo antes de cargar la imagen?

Answer 1

Isótopo no funcionará porque sus imágenes aún no se han cargado, por lo que el ancho y el alto de las imágenes es 0. Use https://github.com/desandro/imagesloaded o corrija el alto y el ancho de sus imágenes con CSS.