我在http://www.gablabelle.com的响应式网页设计中使用同位素,并且页面加载时布局很好,但在调整窗口大小时会搞乱。在查看我的脚本文件后,我无法弄清楚出了什么问题。
奇怪的是,布局在某些时候到位。
请观看此视频:http://www.visualise.ca/files/videos/isotope02.mov
添加了一个示例我尝试过使用两个不同的jQuery脚本
第一)
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是正确的(不显示缩略图,只显示占位符)。
非常感谢任何帮助。感谢。