自适应瀑布流布局，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>