github地址:https://github.com/chunshulimao/waterfall
用法:
1 靜態加載:將父節點中已有的子節點重新以瀑布流的形式橫向加載
1.1 每列依次加載一個子節點putEasyWater(瀑布流靜態加載的父節點,加載成多少列)方法.
demo:
<!DOCTYPE html>
<html>
<head>
<title>測試</title>
</head>
<body>
<div id="contentId">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</div>
</body>
<script type="text/javascript" src="waterfall.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script >
//模擬數據,把<div id="contentId">裏的子節點賦予參差不齊的高度 start
var contentchildren=$("#contentId").children();
var itemCount=contentchildren.length;
for (var j =0; j<itemCount; j++) {
(contentchildren.eq(j)).css({"width":"200px","height":(100+Math.random()*300),"display":"block","background-color":"pink","border":"2px solid black"});
}
//模擬模擬數據,把<div id="contentId">裏的子節點賦予參差不齊的高度 end
//調用方法加載
putEasyWater("#contentId",3);
</script>
</html>效果如下:
1.2 目前高度最低的列加載子節點的形式重新加載成瀑布流(避免出現瀑布流每列的高度相差太大的情況)putSmartWater(瀑布流靜態加載的父節點,加載成多少列)
demo:
<!DOCTYPE html>
<html>
<head>
<title>測試</title>
</head>
<body>
<div id="contentId">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</div>
</body>
<script type="text/javascript" src="waterfall.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script >
//模擬數據,把<div id="contentId">裏的子節點賦予參差不齊的高度 start
var contentchildren=$("#contentId").children();
var itemCount=contentchildren.length;
for (var j =0; j<itemCount; j++) {
(contentchildren.eq(j)).css({"width":"200px","height":(100+Math.random()*300),"display":"block","background-color":"pink","border":"2px solid black"});
}
//模擬模擬數據,把<div id="contentId">裏的子節點賦予參差不齊的高度 end
//調用方法加載
putSmartWater("#contentId",3);
</script>
</html>效果如下
2.動態加載:每次加載一個想要的子節點到瀑布流
2.1 目前列子節點數目最少的一列加載一個新的子節點,
putDynamicWater(動態加載瀑布流的父節點,加載成多少列,需要動態加載的新節點),避免出現瀑布流每列的高度相差太大的情況.
demo:
<!DOCTYPE html>
<html>
<head>
<title>測試</title>
</head>
<body>
<div id="contentId">
</div>
</body>
<script type="text/javascript" src="waterfall.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script >
//創建10條隨機高度的模擬數據 逐條動態添加
for (var j =0; j<10; j++) {
//創建模擬數據start
var myitem=document.createElement("span");
$(myitem).css({"width":"200px","height":(100+Math.random()*300),"display":"block","background-color":"pink","border":"2px solid black"});
myitem.innerText=j+"";
//創建模擬數據end
putDynamicWater("#contentId",3,myitem);//添加myitem到瀑布流
//putSmartDynamicWater("#contentId",3,myitem);//添加myitem到瀑布流
}
</script>
</html>效果圖如下
2.2 在高度最低的列加載一個新的子節點,
putSmartDynamicWater(動態加載瀑布流的父節點,加載成多少列,需要動態加載的新節點)
demo:
<!DOCTYPE html>
<html>
<head>
<title>測試</title>
</head>
<body>
<div id="contentId">
</div>
</body>
<script type="text/javascript" src="waterfall.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script >
//創建10條隨機高度的模擬數據 逐條動態添加
for (var j =0; j<10; j++) {
//創建模擬數據start
var myitem=document.createElement("span");
$(myitem).css({"width":"200px","height":(100+Math.random()*300),"display":"block","background-color":"pink","border":"2px solid black"});
myitem.innerText=j+"";
//創建模擬數據end
//putDynamicWater("#contentId",3,myitem);//添加myitem到瀑布流
putSmartDynamicWater("#contentId",3,myitem);//添加myitem到瀑布流
}
</script>
</html>效果圖如下
