所以我尝试结合 jQuery Masonry 插件(来自:http://masonry.desandro.com/ http://masonry.desandro.com/)使用 Modernizr 在低分辨率下消除砖石结构,以便我的 div 恢复到居中的部分宽度布局。我承认我的 JavaScript 技能仍在发展中,但我认为社区可能能够在这方面帮助我。
在低于 768 px 的分辨率下,如果处于活动状态,我希望砌体能够被破坏;而在更大的分辨率下,如果尚未运行,我希望它能够执行。目前一切工作正常,除了我在控制台中收到此错误:在初始化之前无法调用砌体上的方法;试图呼叫“摧毁”。这是我处理此任务的代码。
$(window).load( function() {
$('#masonry').masonry({
transitionDuration: 10,
columnWidth:'.sizer',
});
if(Modernizr.mq('screen and (max-width:767px)') && $('#masonry').masonry) {
$('#masonry').masonry('destroy');
}
});
$(document).ready(function() {
function doneResizing() {
if(Modernizr.mq('screen and (min-width:768px)')) {
// action for screen widths including and above 768 pixels
$('#masonry').masonry({
transitionDuration: 10,
columnWidth:'.sizer',
});
}
else if(Modernizr.mq('screen and (max-width:767px)') && $('#masonry').masonry) {
// action for screen widths below 768 pixels
$('#masonry').masonry('destroy');
}
}
var id;
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(doneResizing, 0);
});
doneResizing();
});
因此,我能弄清楚如何解决此问题的唯一方法是全局声明一个布尔变量,以便我可以在两个代码区域之间使用它。我已经读到这是不好的做法,但由于这是该变量的唯一用途,并且没有可能的安全问题,我实际上仍然不应该这样做吗?
//init masonry
$(window).load( function() {
$('#masonry').masonry({
transitionDuration: 10,
columnWidth:'.sizer',
}
);
window.masonryIsActive = true;
if(Modernizr.mq('screen and (max-width:767px)')) {
$('#masonry').masonry('destroy');
window.masonryIsActive = false;
}
});
$(document).ready(function() {
function doneResizing() {
if(Modernizr.mq('screen and (min-width:768px)')) {
// action for screen widths including and above 768 pixels
$('#masonry').masonry({
transitionDuration: 10,
columnWidth:'.sizer',
});
window.masonryIsActive = true;
}else if(Modernizr.mq('screen and (max-width:767px)') && window.masonryIsActive == true) {
// action for screen widths below 768 pixels
$('#masonry').masonry('destroy');
window.masonryIsActive = false;
}
}