基于 jquery imagesloaded masonry 实现的瀑布流图片展示

基于 jquery imagesloaded masonry 实现的瀑布流图片展示

最近忙于react和vue开发，冷落了jQuery兄，所以乘着有个闲功夫，完成了个小案例。
顺带吐槽一下，我们的网络环境，哎，也不知道老是防自家人有啥意思。

简述，版本，及插件

	原本应该是基于 imagesloaded masonry 和 infinitescroll 或者再加上bootstrap的，由于是练习就省略了。
	1， imagesLoaded PACKAGED v4.1.4
	2， Masonry PACKAGED v4.2.2
	两个jQuery插件的地址
	链接：https://pan.baidu.com/s/1S11vmQ7l6q1747DcUExoJQ 
	提取码：rops 
	包里没有jQuery，包里没有jQuery，包里没有jQuery

案例

html

<div class="grid"></div>
<script type="text/javascript" src="./jquery2.1.4.min.js"></script>
<script type="text/javascript" src="./masonry.pkgd.js"></script>
<script type="text/javascript" src="./imagesloaded.pkgd@4.js"></script>

css

		.grid{
			width: 100%;
			overflow: hidden;
			position: relative;
		}
		.grid-item{
			position: absolute;
			left: 0;
			top: 0;
		}
		.grid-item-img{
			width: 100%;
		}
		.grid-item p{
			width: 100%;
			line-height: 20px;
			text-align: center;
			border-top: 1px dashed rgba(0, 0, 0, 0.25);
			font-size: 16px;
			overflow: hidden;
		}

js

var winArr = [];// 数据列表，在ajax中获得
var columnN = 50;// 每个小方块的宽度（宽度固定，高度不固定）
var current = 1;// 即将展示第几张图片
var total = 0;// 列表总数
var $container = undefined;// 即将定义的 Masonry 对象

		// 展示图片的 function
		function appendImg(){
			if( current > total ){
				alert('没有更多表情了');
			}else{
				for(let i = current; i < current+20; i++){
					if( i < total ){
						if( current == 1 ){
							$(`
								<div class="grid-item" style="width:${columnN+'%'};">
									<img class="grid-item-img" data_src="${winArr[i].src}" src="${winArr[i].src}" alt="">
									<p>${winArr[i].name}</p>
								</div>
							`).appendTo($('.grid'))
						}else{
							var $items = $(`
								<div class="grid-item" style="width:${columnN+'%'};">
									<img class="grid-item-img" data_src="${winArr[i].src}" src="${winArr[i].src}" alt="">
									<p>${winArr[i].name}</p>
								</div>
							`)
							$container = $('.grid').masonry({
								itemSelector: '.grid-item',
								columnWidth: '.grid-item',
								percentPosition: true
							});
							$container.append($items).masonry('appended',$items)
							$container.imagesLoaded().progress(function() {
								$container.masonry('layout')
							})
						}
					}
				}
				if(current == 1){
					$container = $('.grid').masonry({
						itemSelector: '.grid-item',
						columnWidth: '.grid-item',
						percentPosition: true
					});
					$container.imagesLoaded().progress(function() {
						$container.masonry('layout')
					})
				}
				current += 20;
				// console.log('$container$container$container',$container)
			}
			
		}
		$(document).ready(function() {
			$(window).scroll(function() {
			if ($(document).scrollTop()<=0){
				console.log("滚动条已经到达顶部为0");
			}
			if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
				console.log("滚动条已经到达底部为" + $(document).scrollTop());
				appendImg()
			}
			});
		});