jQuery 实现瀑布流布局及下滑加载页面

蘑菇街商品的信息，一个接一个，衔接紧密，根据浏览器大小有几列，元素等宽不等高，向下滑动加载就是常见的瀑布流布局，

实现瀑布流布局有三种方式，JavaScript原生，jQuery，和CSS3 column方法。

我写了JavaScript 和jQuery两种。

jQuery相对于js的优点就是，获取，定义，遍历元素方便，有很多封装的函数，支持连缀，隐式迭代。

如要获取一个类名为box的元素，js需要写一个函数，而jQuery 只需要$('#main>div)，

如果要遍历元素，js需要写一个for函数，而jQuery只需要each函数，

如果要获取数组中指定元素的索引，js需要写一个函数，而jQuery只需要inArray函数，

如果要写元素的样式，js需要单独定义style，而jQuery只需要css函数。

jQuery思路就是

1、 html写好整体的盒子框架，div块，

2、css 设置好图片的相对定位，样式，块元素，浮动，

扫描二维码关注公众号，回复： 3841242 查看本文章

3、jquery

封装成一个函数 waterfall()

（1）根据浏览器的宽度和定义的图片的统一的宽度来计算有几列。

（2）获取第一行图片的高度，找到最矮的索引让第二行第一个元素排列在下面。

（3）定位图片的位置要修改css样式，并要实时更新高度数组，以便下一个图片定位到正确的位置。

封装成一个函数 checkScrollSlide()

（4）判断是否要加载的情况，规定当最后一个图片露出一半的时候开始加载。

（5）如何判断，比较最后一个图片到父元素盒子的高度加上自身一半的高度和浏览器窗口的高度加上滚动条滚过的高度，

因为前者是固定的，后者随着滑动变化，如果前者大于后者，说明还没滑到，如果小于后者，就说明是时候加载了。

（6）返回true后，定义加载事件，创建html元素，渲染后台的数据，添加到页面后面，注意最后要继续调用waterfall()函数。

注意：有的参数如value，获取的是DOM对象，而jQuery方法不能直接对DOM对象进行操作，所以需要用$() 转化成jQuery对象。

大体的思路就这个了，细节的如何实现，看接下来放上js源码。

$(window).on('load',function(){
	waterfall();
        //模拟后台数据
	var dataInt ={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]}
	$(window).on('scroll',function(){
		if (checkScrollSlide){
			// 遍历后台的数据
			$.each(dataInt.data,function(key,value){
				// 直接用jQuery方法就可以创建元素，添加类名，添加到父元素后面，方法可以通过.迭代 
			var oBox = $('<div>').addClass('box').appendTo('#main');
			var oPic = $('<div>').addClass('pic').appendTo($(oBox));
			var oImg = $('<img>').attr('src','img/'+ $(value).attr('src')).appendTo($(oPic));
		})
			waterfall();
		}
	})
})

function waterfall(){
	//包含选择器， 空格选择器会选择所有的子元素
	// > 取mian元素的第一个子元素
	var $boxs = $('#main>div');
	// 列宽  width（）只能获得图片的宽度，
	// outerWidth（）能获得包括边界的宽度
	var w = $boxs.eq(0).outerWidth();
	var cols = Math.floor($(window).width()/w);
	$('#main').width(cols*w).css('margin', '0 auto');
	var hArr=[];
	// jquery的遍历方法
	$boxs.each(function(index,value){
		//console.log(value); 打印的是dom对象，
		// 获取每个图片的高
		var h=$boxs.eq(index).outerHeight();
		if (index<cols){
			// 获取第一行的高度
			hArr[index]=h;
		}
		else{
			// 获取最矮的图片的索引
			var minH = Math.min.apply(null,hArr);
			// inArray函数能获取指定数值的索引
			var minHIndex = $.inArray(minH,hArr);
			// value是dom对象，不能直接用jQuery方法直接操作
			// 要转换为jQuery对象
			$(value).css({
				'position':'absolute',
				'top':minH +'px',
				'left':minHIndex*w +'px'
			})
			// 在else循环中  改变的是加上下一行元素后的高度
			hArr[minHIndex] += $boxs.eq(index).outerHeight();
		}				
	})
//console.log(hArr);
}

function checkScrollSlide(){
	// 获取最后一个图片
	var $lastBox = $('main>div').last();
	// 最后一个图片距离父元素的高度和自身一半的高度
	var lastBoxDis = $lastBox.offset().height+Math.floor($lastBox.outerHeight());
	// 划过的高度
	var scrollTop = $(window).scrollTop();
	// 浏览器的高度
	var documentH = $(window).height();
	return(lastBoxDis<scrollTop+documentH)?true:false;
}

注：如果有错误的言词，可以提醒我更正。

jQuery 实现瀑布流布局及下滑加载页面

猜你喜欢