1
http://www.gablabelle.com에서 반응 형 웹 디자인에 isotope를 사용하고 있습니다. 페이지로드시 레이아웃이 좋지만 창의 크기를 조정할 때 엉망이됩니다. 스크립트 파일을 검토 한 후에 잘못된 점을 파악할 수 없습니다.반응 형 웹 디자인에서 동위 원소를 사용하여 레이아웃을 엉망으로 만들었습니다.
이상한 점은 레이아웃이 어느 시점에서 제자리에 도착한다는 것입니다.
http://www.visualise.ca/files/videos/isotope02.mov는 또한 http://jsfiddle.net/CNb7r/
내가
1 두 개의 다른 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();
으로 시도했습니다에서 예를 추가 :
는이 비디오에서 봐 주시기 바랍니다 제 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();
자바 스크립트를 사용 중지하면 반응 형 CSS가 올바른 것으로 나타납니다 (미리보기 이미지는 표시되지 않으며 자리 표시 자만 표시됨).
도움을 주시면 감사하겠습니다. 감사.