所以,我试图结合的jQuery插件砌体(来源: http://masonry.desandro.com/ )与Modernizr的杀砌筑时以低的分辨率,使我的div恢复到一个中心部分宽度的布局。 我承认,我的JavaScript技能仍然在发展,但我想通了社区也许能帮助我在这一个。
在低于768像素的分辨率,我想石工,如果有效,而当在较大的决议,我想如果没有运行它来执行被销毁。 目前一切工作完全不同的,我在我的控制台收到此错误: 不能调用在初始化之前砌筑方法; 试图调用“消灭”。 这是我处理这个任务的代码。
$(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;
}
}