Elastic Columns是一个轻量级的jQuery插件，受Masonry.js和同位素.js的启发，用于创建灵活响应的类似砖石的布局。

该插件均衡网格项的宽度，并以类似Pinterest的流动网格布局重新排列它们。

参见：

• JavaScript和CSS中的10个最佳网格布局系统

如何使用它:

1.在jQuery之后下载并加载Elastic Columns的缩小版。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/elastic-columns.min.js"></script>

2.将项目添加到砌体布局中。

<div class="columns">
  <div class="item">
    Grid Item 1
  </div>
  <div class="item">
    Grid Item 2
  </div>
  <div class="item">
    Grid Item 3
  </div>
  ...
</div>

3.初始化顶部容器上的插件，并指定列数，如下所示。

var $container = $('.columns');
$container.elasticColumns(
{
  columns: 3,
});

4.启用插件，根据屏幕大小动态设置列数。

$(window).on('resize', function(evt)
  {
    // 4 columns when the screen size is larger than 1200px 
    var columns = $container.width() > 1200 ? 4 : 3;
    $container.elasticColumns('set', 'columns', columns);
    $container.elasticColumns('refresh');
});

5.启用插件，根据屏幕大小动态设置列数。

$(window).on('resize', function(evt)
  {
    // 4 columns when the screen size is larger than 1200px 
    var columns = $container.width() > 1200 ? 4 : 3;
    $container.elasticColumns('set', 'columns', columns);
    $container.elasticColumns('refresh');
});

6.设置网格项之间的间距。

var $container = $('.columns');
$container.elasticColumns(
{
  columns: 3,
  innerMargin: 20,
  outerMargin: 20,
});

7.销毁实例。

$container.elasticColumns('destroy');

预览截图

在jQuery中创建动态响应砌体布局 弹性柱