添加引入瀑布流框架的代码
<!-- 引入瀑布流js文件 -->
<script type="text/javascript"
src="js/masonry.pkgd.min.js"></script>
添加js代码
//初始化瀑布流 设置选取图片的选择器 和 图片所占宽度
$(".grid").masonry({
itemSelector:".grid-item",
columnWidth:210
});
//调用布局方法
$(".grid").masonry("layout");
瀑布流解决图片层叠问题:
<script type="text/javascript"
src="js/imagesloaded.pkgd.js"></script>
//在图片加载完之后再去调整布局
$(".grid").imagesLoaded().progress(function(){
//调用布局方法
$(".grid").masonry("layout");
});