我正在尝试在此站点上设置同位素,它需要处理布局并且我需要能够将元素附加到容器。
问题是它似乎没有正确初始化图像,下面是我如何初始化它:
$(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/ 该网站可以安全工作,没有裸照
网站似乎也需要刷新才能正确加载,我想图像是第二次捕捉到的,所以第一次失败是因为在图像加载之前触发了同位素?
最佳答案
Isotope 将不起作用,因为您的图像尚未加载,因此图像的宽度和高度为 0。使用 https://github.com/desandro/imagesloaded或使用 CSS 修复图像的高度和宽度。
关于javascript - Isotope Jquery 插件布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19232587/