http://www.gablabelle.comのレスポンシブ Web デザインで isotope を使用しています。レイアウトはページの読み込み時に適切ですが、ウィンドウのサイズを変更するとめちゃくちゃになります。スクリプト ファイルを確認しても、何が問題なのかわかりません。
奇妙なことは、レイアウトがある時点で適切になることです。
このビデオをご覧ください: http://www.visualise.ca/files/videos/isotope02.mov
http://jsfiddle.net/CNb7r/にも例を追加しました
私は2つの異なる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();
そして2番目）
$(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 が正しいことがわかります (サムネイルは表示されず、プレースホルダーのみが表示されます)。
どんな助けでも大歓迎です。ありがとう。