js使用waterfall橫向載入瀑布流,一行程式碼完成

abfdada發表於2018-05-03
JS行程

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>

效果圖如下
這裡寫圖片描述

相關文章