Isotope Jquery插件布局问题 [英] Isotope Jquery plugin layout issues

问题描述

我试图在这个网站上设置同位素，它需要处理布局，我需要能够将项目附加到容器。

i am trying to set up isotope on this site, it needs to handle the layout and i need to be able to append items to the container.

问题是的，它似乎没有正确初始化图像，这里是如何初始化：

The issue is that it does not seem to initialize the images properly, here is how i init it:

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

图像完全不受masonry选项的影响，如果我在CSS i中指定Width有加载问题。

The images are completly unaffected by the masonry options, and if i specify "Width" in my CSS i have loading issues.

load_more执行ajax调用，如果成功调用此函数，则返回数据：

load_more preforms an ajax call and on success it calls this function with the data returned:

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/
网站是安全的工作，没有裸体图片

这也似乎网站需要刷新正确加载，我想图像第二次捕获，所以它第一次失败，由于在图像加载之前触发同位素？

It also seems like the site needs a refresh to load properly, i guess the images get catched the second time, so it fails the first time due to triggering isotope prior to image load ?

推荐答案

同位素将无法工作，因为您的图片尚未加载，因此图片的宽度和高度为0.使用https://github.com/desandro/imagesloaded 或使用CSS修正图片的高度和宽度。

Isotope will not work because your images haven't loaded yet, so the width and height of images are 0. Use https://github.com/desandro/imagesloaded or fix the height and width of your images with CSS.

这篇关于Isotope Jquery插件布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！