三种方式实现瀑布流布局

超、凢脫俗 2022-03-22 12:59 225阅读 0赞

分别使用javascript，jquery，css实现瀑布流布局：  
  
第一种方式：使用JavaScript：

1 <!DOCTYPE html>
    2 <html lang="en">
    3 <head>
    4 <meta charset="UTF-8">
    5 <title>瀑布流布局</title>
    6 <style>
    7 *{padding:0;margin:0;}
    8 .clearfix:after,
    9 .clearfix:before {
    10 content: " ";
    11 display: table;
    12 }
    13 .clearfix:after {
    14 clear: both;
    15 }
    16 .main {
    17 position: relative;
    18 -webkit-column-width: 210px;
    19 -moz-column-width: 210px;
    20 -webkit-column-gap: 5px;
    21 -moz-column-gap: 5px;
    22 }
    23 .box {
    24 float: left;
    25 padding: 15px 0 0 15px;
    26 }
    27 .box .pic {
    28 width: 180px;
    29 height: auto;
    30 padding: 10px;
    31 border-radius: 5px;
    32 box-shadow: 0 0 5px #cccccc;
    33 border: 1px solid #cccccc;
    34 }
    35 .box .pic img {
    36 display: block;
    37 width: 100%;
    38 }
    39
    40
    41 </style>
    42 </head>
    43 <body>
    44 <div class="main clearfix" id="main">
    45 <div class="box">
    46 <div class="pic"><img src="./images/0.jpg"></div>
    47 </div>
    48 <div class="box">
    49 <div class="pic"><img src="./images/1.jpg"></div>
    50 </div>
    51 <div class="box">
    52 <div class="pic"><img src="./images/2.jpg"></div>
    53 </div>
    54 <div class="box">
    55 <div class="pic"><img src="./images/3.jpg"></div>
    56 </div>
    57 <div class="box">
    58 <div class="pic"><img src="./images/4.jpg"></div>
    59 </div>
    60 <div class="box">
    61 <div class="pic"><img src="./images/5.jpg"></div>
    62 </div>
    63 <div class="box">
    64 <div class="pic"><img src="./images/6.jpg"></div>
    65 </div>
    66 <div class="box">
    67 <div class="pic"><img src="./images/7.jpg"></div>
    68 </div>
    69 <div class="box">
    70 <div class="pic"><img src="./images/8.jpg"></div>
    71 </div>
    72 <div class="box">
    73 <div class="pic"><img src="./images/9.jpg"></div>
    74 </div>
    75 <div class="box">
    76 <div class="pic"><img src="./images/10.jpg"></div>
    77 </div>
    78 <div class="box">
    79 <div class="pic"><img src="./images/11.jpg"></div>
    80 </div>
    81 <div class="box">
    82 <div class="pic"><img src="./images/12.jpg"></div>
    83 </div>
    84 <div class="box">
    85 <div class="pic"><img src="./images/13.jpg"></div>
    86 </div>
    87 <div class="box">
    88 <div class="pic"><img src="./images/14.jpg"></div>
    89 </div>
    90 <div class="box">
    91 <div class="pic"><img src="./images/15.jpg"></div>
    92 </div>
    93 <div class="box">
    94 <div class="pic"><img src="./images/16.jpg"></div>
    95 </div>
    96 <div class="box">
    97 <div class="pic"><img src="./images/17.jpg"></div>
    98 </div>
    99 <div class="box">
    100 <div class="pic"><img src="./images/18.jpg"></div>
    101 </div>
    102 <div class="box">
    103 <div class="pic"><img src="./images/19.jpg"></div>
    104 </div>
    105 <div class="box">
    106 <div class="pic"><img src="./images/20.jpg"></div>
    107 </div>
    108 <div class="box">
    109 <div class="pic"><img src="./images/21.jpg"></div>
    110 </div>
    111 <div class="box">
    112 <div class="pic"><img src="./images/22.jpg"></div>
    113 </div>
    114 <div class="box">
    115 <div class="pic"><img src="./images/23.jpg"></div>
    116 </div>
    117 <div class="box">
    118 <div class="pic"><img src="./images/24.jpg"></div>
    119 </div>
    120 <div class="box">
    121 <div class="pic"><img src="./images/25.jpg"></div>
    122 </div>
    123 <div class="box">
    124 <div class="pic"><img src="./images/26.jpg"></div>
    125 </div>
    126 <div class="box">
    127 <div class="pic"><img src="./images/27.jpg"></div>
    128 </div>
    129 <div class="box">
    130 <div class="pic"><img src="./images/28.jpg"></div>
    131 </div>
    132 <div class="box">
    133 <div class="pic"><img src="./images/29.jpg"></div>
    134 </div>
    135 <div class="box">
    136 <div class="pic"><img src="./images/25.jpg"></div>
    137 </div>
    138 <div class="box">
    139 <div class="pic"><img src="./images/26.jpg"></div>
    140 </div>
    141 <div class="box">
    142 <div class="pic"><img src="./images/27.jpg"></div>
    143 </div>
    144 <div class="box">
    145 <div class="pic"><img src="./images/28.jpg"></div>
    146 </div>
    147 <div class="box">
    148 <div class="pic"><img src="./images/29.jpg"></div>
    149 </div>
    150 </div>
    151 <script>
    152 window.onload = function(){
    153 waterfall('main','box');
    154
    155
    156 //模拟json数据
    157 var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};
    158
    159
    160 //监听scroll事件
    161 window.onscroll = function(){
    162 var isPosting = false;
    163 if(checkScollSlide('main','box') && !isPosting){
    164 var oParent = document.getElementById('main');
    165 for(var i in dataJson.data){
    166 isPosting = true;
    167 var oBox = document.createElement('div');
    168 oBox.className = 'box';
    169 oBox.innerHTML = '<div class="pic"><img src="./images/'+dataJson.data[i].src+'"></div>';
    170 oParent.appendChild(oBox);
    171 }
    172 isPosting = false;
    173 waterfall('main','box');
    174 }
    175 }
    176
    177
    178 }
    179
    180
    181 /*
    182 * parent 父元素id clsName 块元素类*/
    183 function waterfall(parent,clsName){
    184 //获取父元素
    185 var oParent = document.getElementById(parent),
    186 //获取所有box
    187 aBoxArr = oParent.getElementsByClassName(clsName),
    188 //单个box宽度
    189 iBoxW = aBoxArr[0].offsetWidth,
    190 // 列数
    191 cols = Math.floor(document.documentElement.clientWidth / iBoxW);
    192
    193
    194 oParent.style.cssText = 'width:'+iBoxW*cols+'px;margin:0 auto;';
    195
    196
    197 //储存所有的高度
    198 var hArr = [];
    199 for(var i = 0; i < aBoxArr.length; i++){
    200 if(i < cols){
    201 hArr[i] = aBoxArr[i].offsetHeight;
    202 }else{
    203 //获取hArr最小值
    204 var minH = Math.min.apply(null,hArr),
    205 // hArr最小值索引index
    206 minHIndex = getMinHIndex(hArr,minH);
    207 aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;';
    208
    209
    210 //添加元素之后更新hArr
    211 hArr[minHIndex] += aBoxArr[i].offsetHeight;
    212 }
    213 }
    214 }
    215
    216
    217 //获取最小值索引
    218 function getMinHIndex(arr,val){
    219 for(var i in arr){
    220 if(arr[i] == val){
    221 return i;
    222 }
    223 }
    224 }
    225
    226
    227 //检查是否满足加载数据条件,parent 父元素id clsName 块元素类
    228 function checkScollSlide(parent,clsName){
    229 var oParent = document.getElementById(parent),
    230 aBoxArr = oParent.getElementsByClassName(clsName),
    231 // 最后一个box元素的offsetTop+高度的一半
    232 lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,
    233 //兼容js标准模式和混杂模式
    234 scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
    235 height = document.documentElement.clientHeight || document.body.clientHeight;
    236 return lastBoxH < scrollTop + height ? true : false;
    237 }
    238
    239
    240 </script>
    241
    242 </body>
    243 </html>

第二种方式：使用jquery：(html结构跟css同上)

$( window ).on( "load", function(){
    waterfall('main','box');
    
    //模拟数据json
    var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};
    
    window.onscroll=function(){
    var isPosting = false;
    if(checkscrollside('main','box') && !isPosting){
    isPosting = true;
    $.each(dataJson.data,function(index,dom){
    var $box = $('<div class="box"></div>');
    $box.html('<div class="pic"><img src="./images/'+$(dom).attr('src')+'"></div>');
    $('#main').append($box);
    waterfall('main','box');
    isPosting = false;
    });
    }
    }
    });
    
    /*
    parend 父级id
    clsName 元素class
    */
    function waterfall(parent,clsName){
    var $parent = $('#'+parent);//父元素
    var $boxs = $parent.find('.'+clsName);//所有box元素
    var iPinW = $boxs.eq( 0 ).width()+15;// 一个块框box的宽
    var cols = Math.floor( $( window ).width() / iPinW );//列数
    $parent.width(iPinW * cols).css({'margin': '0 auto'});
    
    var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
    
    $boxs.each( function( index, dom){
    if( index < cols ){
    pinHArr[ index ] = $(dom).height(); //所有列的高度
    }else{
    var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
    var minHIndex = $.inArray( minH, pinHArr );
    $(dom).css({
    'position': 'absolute',
    'top': minH + 15,
    'left': $boxs.eq( minHIndex ).position().left
    });
    //添加元素后修改pinHArr
    pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了块框后的列高
    }
    });
    }
    
    //检验是否满足加载数据条件，即触发添加块框函数waterfall()的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
    function checkscrollside(parent,clsName){
    //最后一个块框
    var $lastBox = $('#'+parent).find('.'+clsName).last(),
    lastBoxH = $lastBox.offset().top + $lastBox.height()/ 2,
    scrollTop = $(window).scrollTop(),
    documentH = $(document).height();
    return lastBoxH < scrollTop + documentH ? true : false;
    }

第三种方式：使用css：(html结构同上)

.clearfix:after,
    .clearfix:before {
    content: " ";
    display: table;
    }
    .clearfix:after {
    clear: both;
    }
    .main {
    position: relative;
    [color=#ff0000]-webkit-column-width: 210px;
    -moz-column-width: 210px;
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;[/color]
    }
    .box {
    float: left;
    padding: 15px 0 0 15px;
    }
    .box .pic {
    width: 180px;
    height: auto;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #cccccc;
    border: 1px solid #cccccc;
    }
    .box .pic img {
    display: block;
    width: 100%;
    }

瀑布流实现方式比较：  
Javascript原生方式/jquery方式  
1、        需要计算，列数 = 浏览器窗口宽度/图片宽度，图片定位是根据每一列的高度计算下来图片的位置；  
2、        图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范  
  
Css方式  
1、        不需要计算，浏览器自动计算，只需设置列宽，性能高；  
2、        列宽随着浏览器窗口大小进行改变，用户体验不好；  
3、        图片排序按照垂直顺序排列，打乱图片显示顺序；  
4、        图片加载还是依靠javascript/jquery实现

转自：http://www.qdfuns.com/notes/27624/397dc45aeb17e2da9e0351a3ae973b64.html