瀑布流的实现原理与实例

来源：互联网发布：java io 简介总结编辑：程序博客网时间：2024/06/05 07:58
一、原理：

计算每一行能够容纳的列数。
寻找每列之中所有高度之和的最小列
添加新元素至该列
循环找，直到结束。
<!DOCTYPE html><html lang="en">     <head>           <meta charset="UTF-8">           <title></title>           <script src="jquery-3.2.1.min.js"></script>           <style>                div.item {                     position: absolute;                     width: 200px;                     margin: 10px;                     transition: all 1s;                }                                div#content {                     position: relative;                }                                .part1 {                     background-color: yellow;                     height: 200px;                }                                .part2 {                     background-color: #006ac1;                     height: 400px;                }                                .part3 {                     background-color: blueviolet;                     height: 300px;                }           </style>     </head>     <body>           <div id="content">                <div class="item part1">1</div>                <div class="item part2">2</div>                <div class="item part3">3</div>                <div class="item part1">4</div>                <div class="item part1">5</div>                <div class="item part2">6</div>                <div class="item part2">7</div>                <div class="item part3">8</div>                <div class="item part1">9</div>                <div class="item part2">10</div>                <div class="item part2">11</div>                <div class="item part2">12</div>                <div class="item part3">13</div>                <div class="item part3">14</div>           </div>           <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js";></script>;           <script>                function waterFall() {                     var widthNum = parseInt($(window).width() / $(".item").outerWidth(true)),//求列数                           allHeight = [];//所有高度，一维数组                     for(var i = 0; i < widthNum; i++) {                           allHeight.push(0)                     }//给每一列的高度设置初始值为0                     $(".item").each(function() {                           var $cur = $(this),                                indx = 0,//设置最小索引值                                minAllHeight = allHeight[0];//设置最小高度值                           for(var j = 0; j < allHeight.length; j++) {                                if(allHeight[j] < minAllHeight) {                                     minAllHeight = allHeight[j];                                     indx = j;                                }                           }                           $cur.css({                                "left": indx * $cur.outerWidth(true),                                "top": minAllHeight                           });                           allHeight[indx] = minAllHeight + $cur.outerHeight(true);//每一列添加对应高度                     })                }                waterFall();                $(window).on("resize", function() {                     waterFall()                })//改变浏览器大小，调用函数。           </script>     </body></html>
阅读全文
0 0