网页瀑布流布局插件Masonry

CSS3有实现类似瀑布流布局的属性column，但是遗憾的是这种布局是纵向布局而不支持横向布局。所以比较合适用于文字多列布局。

调用JQuery WaterFall布局插件：http://masonry.desandro.com/

HTML其中要定义一个容器：

<div id="container">
  <div class="item">...</div>
  <div class="item w2">...</div>
  <div class="item">...</div>
  ...
</div>

用JAVASCRIPT初始化

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

在HTML元素上初始化

<div id="container" class="js-masonry"
  data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>

使用JQuery实例化

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: 200,
  itemSelector: '.item'
});

以下为效果图：

 

来源：https://www.cnblogs.com/foxting/p/4519833.html