jQuery+masonry实现瀑布流

1. 增加jQuery组件 <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js "></script>
2. 增加 masonry 组件 <script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js "></script>
3. 插入<div class="grid" id="grid">

   <div class="grid-item">

   <img />

   </div>

????</div>

1. 初始化组件

   var $grid = $(‘.grid‘).masonry({

   ????????itemSelector: ‘.grid-item‘,

   ????????columnWidth: 228,

   ????});

   ????$grid.masonry(‘layout‘);

   ?

2. 动态载入

function Loading() {

????$.ajax({

????????url: "images.html",

????????cache: false,

????????async: true,

????????/*dataType: html,

????????global: true,*/

????????success: function(html) {

????????????//隐藏加载动态图标

????????????//HideLoading();

?

????????????var $grid = $(‘.grid‘).masonry({

????????????????itemSelector: ‘.grid-item‘,

????????????????columnWidth: 228,

????????????});

?

????????????var $items = $(html).find(‘.grid-item‘);

????????????$grid.append($items)

????????????????// add and lay out newly appended items

????????????????.masonry(‘appended‘, $items);

????????}

????});

}

?