我一直在修改一些关于使 gridster.js 响应的迂回方式的想法。我在gridster的github问题中找到了一个代码片段,并意识到如果我在特定的窗口大小下运行它并销毁并重新运行gridster,我可以获得gridster响应responsivley的效果。让我告诉你我的意思——
$(window).resize(function(){
var width = $(window).width();
var columns = "";
if(Modernizr.mq('screen and (max-width:640px)')){
columns = 1;
gridster.destroy();
var tooFar = $('.gridster .gs-w').filter(function () {
return $(this).data('col') > columns;
});
$(tooFar).each(function () {
$(this).attr('data-col', '1');
});
var tooBig = $('.gridster li').filter(function () {
return $(this).data('sizex') > columns;
});
$(tooBig).each(function () {
$(this).attr('data-sizex', columns);
});
$(".gridster ul").gridster({
widget_base_dimensions: [300, 300],
widget_margins: [5, 5],
max_cols: 1,
resize: {
enabled: true
},
draggable: {
handle: '.dragDiv'
},
serialize_params: function ($w, wgd) {
return {
/* add element ID to data*/
id: $w.attr('id'),
/* defaults */
col: wgd.col,
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y,
/* htmlContent: $($w).html() */
}
}
}).data('gridster');
}
});
因此,当 gridster 应该分成 1 列(它的基数为 4)时,它会破坏并用 1 列重新运行。这工作得非常好,问题是这不是实现这一目标的好方法。我也没有显示所有断点(它根据窗口大小分成 3 -2 -1 列)。它运行得非常糟糕,因为它会在每个窗口调整大小时触发,我想知道是否有一种更简洁的方法可以做到这一点,其中函数在达到窗口大小时只会触发一次。
另外 - 这只是缩小 gridster 的大小,所以如果你缩小它不会扩大,我还没有尝试构建这些功能。
使用可能没有监听窗口重新调整大小的每个实例的任何指示或建议都会非常有帮助。
谢谢!!