jquery 之瀑布流

用jquery实现的瀑布流布局

html+css代码

jquery代码

$(document).ready(function(){
// $(window).on("load", function(){})//加载完再显示图片，实际使用时并没有起作用，好像是jqury版本问题
	getLocation();
	//需要加载的图片资源!!
	var dataImg={"data":[{"src":"8.png"},{"src":"9.png"},{"src":"10.png"}]};
	// 然后绑定滚动事件
	$(window).scroll(function(){
		console.log("scroll");
		//在当前整体高度减掉即将加载的那张图片高度一半的时候,加载新图片
		//当超过时,就加载新的图片资源.
		if(getLastHeight()){
			//遍历dataImg中的资源并加载.
			$.each(dataImg.data,function(index,value){
				//创建并添加盒子
				console.log("new img");
				var pin=$("
").addClass("pin").appendTo("#main");
				var box=$("
").addClass("box").appendTo(pin);
				var img=$("").attr("src","./img/"+$(value).attr("src")).appendTo(box);
			})
			//调用方法摆放图片
			getLocation();
		}
	})
});

function getLastHeight(){
var box=$(".pin");
//获取最后那张图片的高度的一半的位置!
// console.log(box.last().offset().top);
//box.last().get(0)获取的是dom元素,需要用Js的方法获取box.last().get(0).offsetTop;
var lastImgHeight=(box.last().get(0)).offsetTop-Math.floor(box.last().height()/2);
//获取窗口高度
var windowHeight=$(window).height();
//获取滚动的高度
var scrollHeight=$(window).scrollTop();
console.log(scrollHeight+windowHeight+"     "+lastImgHeight);
//当滚动超过指定的位置时,就返回ture 加载新图片
if(lastImgHeight

完整代码可从github获取：https://github.com/qiuqiu2945/jquery/tree/master/waterfallLayout-jq

本文参考网上教程写的，可能有缺陷和问题，欢迎指正。