蘑菇街商品的資訊，一個接一個，銜接緊密，根據瀏覽器大小有幾列，元素等寬不等高，向下滑動載入 就是常見的瀑布流佈局，

實現瀑布流佈局有三種方式，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 設定好圖片的相對定位，樣式，塊元素，浮動，

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;
}

注：如果有錯誤的言詞，可以提醒我更正。