js瀑布流

大家都知道实现js瀑布流的方式有多种，在各大购物网上或者图片网站上可以经常看到，下面小白用一种比较简单的方式实现这个效果。

首先要知道实现的基本原理，比如用ul li 标签布局的来说，重要的是找到并排<li> 的中高度最小的那个，然后向其添加下一个图片元素。下面还是用码说话吧。

html：

		<div id="box">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

css:

		#box ul{
			width: 1080px;
			height: auto;
			margin: 100px auto 0;
		}
		ul li{
			width: 247px;
			list-style: none;
			float: left;
		}
		li div{
			border: 1px solid #000;
			padding: 10px;
			margin-left: 10px;
			margin-bottom: 10px;
		}
		li div img{
			width: 225px;
			display: block;
		}

js：

		$(function(){
			var $box = $("#box");
			var $lis = $("li");
			var len = $lis.length;
			var page = 1;
			//翻页开关
			var falg = true;
			
			function ajax(){
				$.ajax({
					type:"get",
					data:"",
					url:"http://www.wookmark.com/api/json/popular?page="+page,
					dataType:"jsonp",
					cache:false,
					success:function(data){
						if(!data.length){
							//没有数据的时候
							return false;
						}
//						var data = JSON.stringify(data);
						for(var i=0;i<data.length;i++){
//							console.log(data[i]);
							var $div = $("<div></div>");
							var $img = $("<img />");
							var $p = $("<p></p>");
//							$img.src = data[i].preview;
							$img.attr("src",data[i].preview);
							//按比例给高度
							$img.css({"height":data[i].height*(225/data[i].width),"width":225});
							$p.html(data[i].title);
							$div.append($img);
							$div.append($p);
							//获取最短高度的li索引值
							var _index = getShort();
							$lis[_index].appendChild($div.get(0));
						}
						//最后一个图片加载进来时候开打开关进行加载下一页数据
						falg = true;
					},
					error:function(){
						alert("服务器错误···");
					}
				});
			}
			//加载第一页数据
			ajax();
			//滚动事件
			window.onscroll = function(){
				//获取最小li的索引
				var _index = getShort();
				var $li = $lis[_index];
				//获取滚动高度
				var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
				//当最短的li出现在可视区域的时候进行加载下一波数据
				if($li.offsetHeight+$li.offsetTop < document.documentElement.clientHeight+scrollTop){
					//只有上一页数据（图片加载完毕的时候）才进行加载下一页数据
					if(falg){
						falg = false;
						//alert(0);//这里会执行两次？？？？注意会出问题，原因是图片加载需要一定时间
						page++;//页数加一
						ajax();
					}
				}
			};
			//找到高度最小li的索引
			function getShort(){
				var index = 0;
				var liH = $lis[index].offsetHeight;
				for(var i=1;i<len;i++){
					//循环判断最小高度
					if($lis[i].offsetHeight < liH){
						index = i;
						liH = $lis[i].offsetHeight;
					}
				}
				return index;
			}
			
			//获取元素距离顶部的距离
			function getTop(obj){
				var iTop = 0;
				while(obj){
					iTop +=obj.offsetTop;
					obj = obj.offsetParent;
				}
				return obj;
			}
		});

很显然，html css代码还是非常简单的，活都扔给后台去做了，返回的数据比较繁杂。以上js代码中注释有些为原生写法，只是为了复习唯一，也必有很多不足之处，恳请大神斧正，先送上膝盖，本小白不胜感激！！！