自适应瀑布流布局，masonry.pkgd.min.js插件的使用

使用方式

1.在页面底部引入imagesloaded.pkgd.min.js
2.同样引入masonry.pkgd.min.js
点击下载使用的js文件
直接上代码块

<style>
.grid {
    padding: 20px;}
.grid__item{
    margin-bottom: 20px;float: left;width: 220px;}.grid__item img {
    max-width: 100%
}
</style>
<div class="grid"><div class="grid__item"><a  href="#"><img src="img.png" alt="Some image" /><span>标题标题标题标题</span></a></div><div class="grid__item"><a  href="#"><img src="img.png" alt="Some image" /><span>标题标题标题标题</span></a></div><div class="grid__item"><a  href="#"><img src="img.png" alt="Some image" /><span>标题标题标题标题</span></a></div>
</div>
<script>
/* 启用瀑布流第一种 方式 排列的不局中如果放不下边缘会留下空白 不建议使用 */
$(function() {
    var $container = $('.grid');$container.imagesLoaded(function() {
    $container.masonry({
    itemSelector: '.grid__item',gutter: 20,// 定义内容块之间的距离是 20 像素isAnimated: true,// 打开动画选项 当改变窗口宽度 或每行显示数量有变化的时候 会有一种动画效果});});
});
/* 启用瀑布流第二种方式 ： 可以居中改善第一种的不完美 */
$(function() {
    var $objbox = $(".grid");var gutter = 25; // 定义内容块之间的距离是 20 像素var centerFunc, $top0;$objbox.imagesLoaded(function() {
    $objbox.masonry({
    itemSelector: ".grid > .grid__item",gutter: gutter,isAnimated: true // 打开动画选项 当改变窗口宽度 或每行显示数量有变化的时候 会有一种动画效果});centerFunc = function() {
    $top0 = $objbox.children("[style*='top: 0']");$objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");};centerFunc();});var tur = true;$(window).resize(function() {
    if (tur) {
    setTimeout(function() {
    tur = true;centerFunc();},1000);tur = false;}});
});
</script>