沒(méi)錯(cuò)!這就是瀑布流!是不是很酷炫!看似很難實(shí)現(xiàn),實(shí)則很簡(jiǎn)單!我是用li標(biāo)簽創(chuàng)建這些小塊塊,當(dāng)然你也可以根據(jù)你的需要在li標(biāo)簽里,插入圖片或者其他.下面我們就學(xué)習(xí)一下,如何實(shí)現(xiàn)網(wǎng)頁(yè)的響應(yīng)式瀑布流!
第一步編寫(xiě)HTML
可能會(huì)有小伙伴認(rèn)為我們有20個(gè)塊,需要寫(xiě)20個(gè)標(biāo)簽,那你就錯(cuò)了,在JS代碼中我們可以利用for循環(huán)在HTML中查入10個(gè).100個(gè).1000個(gè)你想有多少就有多少!當(dāng)然你最好提前為你的瀑布流做好css樣式,我的這些小塊都是由li標(biāo)簽創(chuàng)建的,這樣在JS中創(chuàng)造的li標(biāo)簽直接賦予相應(yīng)的類(lèi)名.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#flow {
list-style: none;
margin: 0 auto;
position: relative;
}
#flow li {
position: absolute;
background-color: #CCCCCC;
font-size: 50px;
width: 200px;
transition: all 0.5s;
}
</style>
</head>
<body>
<ul id="flow">
<!--<li>1</li>-->
</ul>
</body>
第二步 JS代碼準(zhǔn)備工作
這步中我們需要?jiǎng)?chuàng)建一個(gè)隨機(jī)數(shù),其函數(shù)的返回值我們用來(lái)定義每一個(gè)li元素的高度,當(dāng)然如果你不想隨機(jī)定義高度,那你就去寫(xiě)個(gè)數(shù)組吧!因?yàn)槲业恼w布局距離左邊有10px距離,所以此處創(chuàng)建了一個(gè)leftSpace變量接受了一下.細(xì)心朋友可能已經(jīng)發(fā)現(xiàn)了我的每一個(gè)元素期間都有10px的間距,所以此處創(chuàng)建了一個(gè)paddingSpace變量來(lái)限定每個(gè)li元素的間距.其他的在代碼中都有相應(yīng)的注釋,自行理解!
<script type="text/javascript">
function ranH (min,max) {
return parseInt(Math.random()*(max-min+1))+min;
}
var flow = document.getElementById("flow");
// 左邊距
var leftSpace = 10;
// 間距
var paddingSpace = 10;
//高度數(shù)組 保存每個(gè)li的高度
var hs = [];
第三步 創(chuàng)建li元素
由于在這步代碼中,我們會(huì)看到出現(xiàn)bol值,而我們是在第四步定義了bol的值,并且根據(jù)bol的值來(lái)確定layout函數(shù)是實(shí)現(xiàn)創(chuàng)建li,還是更新li的位置.在這步我們可以先認(rèn)為bol為true.首先,是創(chuàng)建li標(biāo)簽,然后獲取屏幕的寬度根據(jù)屏幕的寬度設(shè)置一行有幾個(gè)li標(biāo)簽,再根據(jù)li的標(biāo)簽的個(gè)數(shù)定義ul的寬度.在定義一下每列的li元素的高度,此處的作用是為了第四步的選出最短列而做準(zhǔn)備.在給予每個(gè)li標(biāo)簽HTML內(nèi)容,并且保存每個(gè)li的高度.
//布局函數(shù)
//bol為真時(shí) 創(chuàng)建li
//bol為假時(shí) 更新li位置
function layout (bol) {
//獲取所有的li 用于大小改變時(shí) 更新布局
var lis = document.getElementsByTagName("li");
var cols = parseInt(document.documentElement.clientWidth/200);
//ul寬度 跟隨寬度一起變化
flow.style.width = cols*200 + 10*(cols-1)+20;
//初始化列高數(shù)組
var arrH =[];
for (var i = 0; i < cols; i++) {
arrH[i]=10;
}
function createLi (index) {
//獲取已有的li或者新建
var li = lis[index]||document.createElement("li");
li.innerHTML = index;
//從數(shù)組中獲取高度或者隨機(jī)高度
var h = hs[index]||ranH(100,300);
li.style.height = h+"px";
if (bol) {
hs.push(h);
}
第四步 插入創(chuàng)建好的帶有內(nèi)容li標(biāo)簽.并且與第三步呼應(yīng),實(shí)現(xiàn)響應(yīng)式瀑布流.
首先求出最短列,將li元素插入最短列下,定義每一個(gè)li的位置.在最后利用系統(tǒng)的window.onresize 函數(shù),當(dāng)屏幕尺寸改變時(shí)執(zhí)行l(wèi)ayout()方法中,更新li位置的方法,以實(shí)現(xiàn)響應(yīng)式瀑布流!
//求最短列
var minH = arrH[0];
var minI = 0;
for (var i = 0; i < cols; i++) {
if (minH>arrH[i]) {
minH=arrH[i];
minI=i;
}
}
//設(shè)置left
var l = leftSpace+(200+paddingSpace)*minI;
li.style.left = l+"px";
//設(shè)置top
li.style.top = arrH[minI]+"px";
//添加
bol&&flow.appendChild(li);
// alert(li.offsetLeft+"~"+li.offsetTop+"~"+li.offsetWidth+"~"+li.offsetHeight);
//更新高度
arrH[minI] = arrH[minI] + li.offsetHeight +paddingSpace;
}
for (var i =0 ; i < 20 ;i++) {
createLi(i);
}
}
//創(chuàng)建
layout(true);
window.onresize =function () {
//更新
layout(false);
}
</script>
</html>
