王新阳

Masonry 官网：https://masonry.desandro.com/
imagesLoaded 官网：https://imagesloaded.desandro.com/
参考：https://www.jianshu.com/p/71ba8a69cf0f

<style>
.list .item{padding:10px;width:25%;}
.list .item img{max-width:100%;}
@media(max-width:1199px){
	.list .item{padding:8px;width:33.333333%;}
}
@media(max-width:575px){
	.list .item{padding:5px;width:50%;}
}
</style>
<div class="list">
	<div class="items"><img src="img1.jpg"></div>
	<div class="items"><img src="img2.jpg"></div>
	......
</div>
<script src="masonry.pkgd.min.js"></script>
<script src="imagesloaded.pkgd.min.js"></script>
<script>
var myList=$('.list');
myList.masonry({
	itemSelector: '.item',
	percentPosition: true,
});
myList.imagesLoaded().progress(function(){
	myList.masonry('layout');
});

//ajax加载简略示例
$('#abc').click(function(){
	var items=$('<div class="item"><img src="img2.jpg"></div><div class="item"><img src="img3.jpg"></div>');
	myList.append(items).masonry('appended',items);
	myList.imagesLoaded().progress(function(){myList.masonry('layout');});
/*
	//数组方式加载
	var items=[$('<div class="item"><img src="img2.jpg"></div>'), $('<div class="item"><img src="img3.jpg"></div>')];
	$.each(items, function(key, item){
		myList.append(item).masonry('appended',item);
		item.imagesLoaded().progress(function(){myList.masonry('layout');});
	});
*/
});
</script>