gridster.js 响应式布局网格

gridster.js 支持响应式布局网格模式，利用min_cols max_cols widget_base_dimensions 三个属性可以实现gridster.js网格响应屏幕的宽度。

响应式布局网格

var gridster;
var serialization = [
  { row: 1, col: 1, size_x: 5, size_y: 1 },
  { row: 1, col: 6, size_x: 1, size_y: 1 },
  { row: 2, col: 1, size_x: 6, size_y: 1 },
];
// sort serialization
serialization = Gridster.sort_by_row_and_col_asc(serialization);

$(function () {
  //初始化 gridster 对象
  gridster = $(".gridster ul").gridster({
    widget_margins: [5, 5],
    //设置最小最大列，同时设置跨度为auto即可实现响应式布局
    min_cols: 1,
    max_cols: 6,
    widget_base_dimensions: ['auto', 150],
    resize: {
      enabled: true
    }
  }).data('gridster');

  gridster.remove_all_widgets();
  $.each(serialization, function (index) {
    gridster.add_widget('<li>' + (index+1) + '</li>', this.size_x, this.size_y, this.col, this.row);
  });

});

在线试一试