我在http://www.gablabelle.com的响应式网页设计中使用同位素，并且布局在页面加载时很好，但在调整窗口大小时会变得混乱。查看我的脚本文件后，我无法弄清楚出了什么问题。
奇怪的是布局在某个时候就位。
请观看此视频： http: //www.visualise.ca/files/videos/isotope02.mov
还在http://jsfiddle.net/CNb7r/添加了一个示例
我试过两个不同的 jQuery 脚本
第 1)
var $container = $("#stream");
var $window = $(window);
$container.imagesLoaded( function(){
$container.isotope({
animationEngine: "best-available",
itemSelector : "article.post",
masonry: {
columnWidth: 300,
gutterWidth: 30
},
onLayout: function(){
forceLoad();
setTimeout(function(){
html_height = $container.height();
$("#sidebar").height(html_height - 30);
}, 500);
}
});
});
$window.smartresize(function(){
var windowSize = $window.width();
var masonryOpts;
// update sizing options
if (windowSize > 1199) {
masonryOpts = {
columnWidth: 300,
gutterWidth: 30
};
} else if (windowSize < 1200 && windowSize > 979) {
masonryOpts = {
columnWidth: 240,
gutterWidth: 20
};
} else if (windowSize < 768) {
masonryOpts = {
columnWidth: windowSize / 2,
gutterWidth: 1
};
} else {
masonryOpts = {
columnWidth: 186,
gutterWidth: 20
};
}
$container.isotope({
masonry: masonryOpts
}).isotope('reLayout');
}).smartresize();
和第二个）
$(window).smartresize(function(){
var $windowSize = $(window).width();
if ($windowSize > 1199) {
$container.imagesLoaded( function(){
$container.isotope({
animationEngine: "best-available",
itemSelector : "article.post",
masonry: {
columnWidth: 300,
gutterWidth: 30
},
onLayout: function(){
setTimeout(function(){
html_height = $container.height();
$("#sidebar").height(html_height - 30);
}, 500);
}
});
});
} else if ($windowSize < 1200 && $windowSize > 979) {
$container.imagesLoaded( function(){
$container.isotope({
animationEngine: "best-available",
itemSelector : "article.post",
masonry: {
columnWidth: 240,
gutterWidth: 20
},
onLayout: function(){
setTimeout(function(){
html_height = $container.height();
$("#sidebar").height(html_height - 20);
}, 500);
}
});
});
} else if ($windowSize < 768) {
$container.imagesLoaded( function(){
$container.isotope({
animationEngine: "best-available",
itemSelector : "article.post",
resizable: false,
masonry: {
columnWidth: $windowSize / 2,
gutterWidth: 1
},
onLayout: function(){
setTimeout(function(){
html_height = $container.height();
$("#sidebar").height(html_height - 30);
}, 500);
}
});
});
} else {
$container.imagesLoaded( function(){
$container.isotope({
animationEngine: "best-available",
itemSelector : "article.post",
masonry: {
columnWidth: 186,
gutterWidth: 20
},
onLayout: function(){
setTimeout(function(){
html_height = $container.height();
$("#sidebar").height(html_height - 20);
}, 500);
}
});
});
};
}).smartresize();
如果您禁用 Javascript，您会看到响应式 CSS 是正确的（不会显示缩略图，只会显示占位符）。
任何帮助将不胜感激。谢谢。