原生js實現最簡單的瀑布流佈局

時間 2020-05-23

標籤原生實現最簡單瀑布佈局欄目 JavaScript 简体版

原文原文鏈接

文章地址 https://www.cnblogs.com/sandraryan/html

瀑布流：瀑布流，又稱瀑布流式佈局。是比較流行的一種網站頁面佈局，視覺表現爲良莠不齊的多欄佈局，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部（百度百科）數組

個人理解是：按照行佈局，每行先添加一個元素，第二行元素從最矮的一行開始添加~~app

圖片大概是這樣子~~dom

（隨機生成顏色，真的辣眼睛。。）佈局

因此這個案例： js插入代碼。隨機生成高度和顏色。flex

代碼：網站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> ul, li { list-style: none; box-sizing: border-box; } ul { width: 600px; border: 5px solid silver; border-radius: 8px; margin: 0 auto; padding: 15px; display: flex; } li { width: 200px;height: 300px; background-color: rgb(0, 162, 255); padding: 10px; } li>div { text-align: center; font-size: 50px; color: white; } </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script>
    // 獲取元素
    var list = document.querySelectorAll("ul li"); // 建立數組，表明三列高度，天天添加一個元素，更新一次數組的值，一行添加三個div
    // ha和li造成一一對應關係
    var ha = [0,0,0]; // 產生兩個數之間的隨機數
    function rn(x,y){ return Math.round(Math.random()*(y-x)+x); } // 使用循環建立元素，添加到對應li
    for(var i = 0 ; i < 10 ; i++){ // 建立元素
        var el = document.createElement("div"); // 隨機元素高度
        var h = rn(100,200); // 隨機元素背景色
        var bg = "#" + (Math.random()+"").substr(2,6); // 生成元素添加高度，背景色
        el.style.height = h + "px"; el.style.backgroundColor = bg; // 設置元素內容
        el.innerHTML = i; el.style.lineHeight = h + "px"; // 找到最矮的一列
        var min = Math.min(ha[0],ha[1],ha[2]); var minIndex = ha.indexOf(min); //將當前元素添加該列，ha的數組對應下標的元素要及時更新
 list[minIndex].appendChild(el); ha[minIndex] += h; } </script>
</body>
</html>

end~~ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。