HTML(注意包裹關系,方便js調用)
復制代碼 代碼如下:
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
</div>
</body>
LESS(less預編譯)
復制代碼 代碼如下:
* {
margin: 0;
padding: 0;
}
#main {
position: relative;
}
.box {
padding:15px 0 0 15px;
float:left;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
img {
width:165px;
height:auto;
}
}
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 < dataInt.data.length; 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.length; i++) {
//遍歷oBoxs數組;
if (i<cols) {
//這裡符合條件的是第一行的每列的第一個;
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.length; 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<scrollTop+height)?true:false;
//頁面滾動的距離是否大於最後一個box元素的offsetTop;
};
總結：
用瀑布流來展現照片再好不過了，下面是瀑布流（每一行的長度等於浏覽器窗口的長度）的一種實現方式，也可以用css3實現，很簡單，谷歌一下你就知道。
我的思路大概是一張一張的圖片插入，當這一行的圖片保持長寬比例不變並且高度低於250時就完成一個了循環，即這一行插入進去了，。
然後進入下一個循環插入下一行。