身體>
LESS（少預編譯）
* {
邊距：0；
填充：0；
}
#main {
位置：相對；
}
.box {
內邊距：15px 0 0 15px;
浮動：左；
}
.pic {
內邊距：10px；
邊框：1px 實心 #ccc;
邊框半徑：5px；
盒子陰影：0px 0px 5px #ccc;
圖片{
寬度：165px；
高度：自動；
}
}
JavaScript(自己理解的註解)
(函數有一定瑕疵,僅用於學習理解)
window.onload = function () {
waterfall("main","box");
//呼叫自訂函數;作用於main下的每一個box元素;
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
//模擬json資料;
window.onscroll = function () {
if (checkScrollSlide) {
//呼叫自訂函數;根據函數傳回值決定捲動是否超出範圍;
var oParent = document.getElementById("main");
for (var i = 0; i
var oBox = document.createElement("div");
oBox.className = "box";
oParent.appendChild(oBox);
//建立box區塊
var oPic = document.createElement("div");
oPic.className = "pic";
oBox.appendChild(oPic);
//建立pic區塊
var oImg = document.createElement("img");
//建立img元素
oImg.src = "images/" dataInt.data[i].src;
//設定圖片引用;
oPic.appendChild(oImg);
};
waterfall("main","box");
//將動態產生的資料區塊進行串流佈局;
};
};
};
//流式佈局主函數,自動調整資料區塊的位置;
function waterfall (parent,box) {
//將main下的所有box元素取出;"parent"代表父級,box代表box元素;
var oParent = document.getElementById(parent);
//將父級元素賦值給變數oParent;
var oBoxs = getByClass(oParent,box);
//透過自訂函數,取得父級下的每一個box元素;所得到的是所有box元素的集合;
//再次將這個得到的box元素的集合賦值給oBoxs;(因為作用域問題,變數不共用);
// console.log(oBoxs.length);
//在控制台中列印出box元素的數量,用於調試;
var oBoxW = oBoxs[0].offsetWidth;
//計算出每一列的寬度;offsetWidth包含內邊距在內的寬度;
// console.log(oBoxW);測試;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//計算整個頁面顯示的列數(頁面寬度/box的寬度);
oParent.style.cssText = "width:" oBoxW*cols "px;margin:0 auto";
//父元素main的寬度=每一列的寬*列數;並且左右居中;
var hArr = [];
//存放每一列高度的陣列;
for (var i = 0; i
//遍歷oBoxs陣列;
if (i
//這裡符合條件的是第一行的每列的第一個;
hArr.push(oBoxs[i].offsetHeight);
//求出每一列的高度放入陣列中;
}else{
//這裡的box元素已經不是第一行的元素了;
var minH = Math.min.apply(null,hArr);
//得到第一行的最小高度並賦值給變項;
// console.log(minH);
var index = getMinhIndex(hArr,minH);
//呼叫自訂函數取得此變數的index值;
oBoxs[i].style.position = "absolute";
oBoxs[i].style.top = minH "px";
oBoxs[i].style.left = oBoxW*index "px";
//設定目前元素的位置;
//目前元素的left值=上方的元素的index值*每列的寬度;
//oBoxs[i].style.left = oBoxs[index].offsetLeft "px";
//第二種取得目前元素的left值;
//此時在第index欄位新增了一個box元素;
hArr[index] =oBoxs[i].offsetHeight;
//每一列更新後的高度=每一列原來的高度 後來新增的box元素的高度;
};
};
};
//js原生透過Class取得元素;
function getByClass (parent,claName) {
//透過class取得元素;(在父級parent的容器下取得claName的元素;)
var boxArr = new Array();
//宣告陣列,用來儲存所獲得的所有class為box的元素;
var oElements = parent.getElementsByTagName("*")
//宣告變數用來儲存此父元素下的所有子元素(*);
for (var i = 0; i
//遍歷數組oElements;
if (oElements[i].className==claName) {
//如果陣列中的某一個元素的calss類別與參數claName相同;
boxArr.push(oElements[i]);
//則將遍歷到的這個box元素歸類為boxArr陣列;
};
};
return boxArr;
//呼叫陣列後,經過一系列函數,遍歷;將得到的陣列傳回給呼叫的函數;
};
//取得陣列元素的index值;
function getMinhIndex (arr,val) {
//arr是父級數組;val是目前元素;
for(var i in arr){
//從0開始遍歷;
if(arr[i]==val){
//找出目前元素在陣列中對應的index值;
return i;
//函數傳回值即為目前元素的index值;
};
};
};
//偵測是否具備了滾動載入資料區塊的條件;
function checkScrollSlide () {
var oParent = document.getElementById("main");
var oBoxs = getByClass(oParent,"box");
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
//最後一個box元素距離頁面頂端的高度(找到最後一個box(oBoxs.lenght-1)的offsetTop) 自身的一半;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//瀏覽器捲軸滾動的距離;
// console.log(scrollTop);
var height = document.body.clientHeight || document.documentElement.clientHeight;
//瀏覽器視窗的高度;
// console.log(height);
return (lastBoxH
//頁面滾動的距離是否大於最後一個box元素的offsetTop;
};
總結：
用瀑布流來展現照片再好不過了，下面是瀑布流（每一行的長度等於瀏覽器窗口的長度）的一種實現方式，也可以用css3實現，很簡單，谷歌一下你就知道。
我的思路大概是一張一張的圖片插入，當這一行的圖片保持長寬比例不變並且高度低於250時就完成一個了循環，即這一行插入進去了，。
然後進入下一個迴圈插入下一行。
