瀑布流

最新推荐文章于 2024-01-27 11:39:47 发布

胡鹤婷

最新推荐文章于 2024-01-27 11:39:47 发布

阅读量160

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/hhthwx/article/details/78503548

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript实现

html代码部分

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流布局</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="./js/script.js"></script>
</head>
<body>
           <div id="main">
              <div class="box">
                  <div class="pic">
                      <img src="./picture/7.jpg" alt="">
                  </div>
              </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/01.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/2.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/12.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/3.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/04.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/1.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/12.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/4.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/12.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/1.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/03.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/01.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/5.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/4.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/3.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/04.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/12.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/2.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/01.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/4.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/01.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/01.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/1.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/12.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/01.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/1.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/01.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/12.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/01.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/7.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/04.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/01.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/12.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/04.jpg" alt="">
                   </div>
               </div>
               <div class="box">
                   <div class="pic">
                       <img src="./picture/7.jpg" alt="">
                   </div>
               </div>
           </div>


</body>
</html>

CSS代码

*{
    margin:0;
    padding:0;
}
#main{
    position: relative;
}
.box{
    padding: 15px 0 0 15px ;
    float:left;
}
.pic{
    padding: 10px;
    border:1px solid #ccc;
    border-radius: 5px;
    /*水平和垂直影音都为0*/
    box-shadow:0 0  5px ;
}
.pic img{
    width: 165px;
    height: auto;
}

JS代码部分

window.onload = function(){
    //将图片摆放在该摆放的位置上
    waterfall('main','box');
    var dataInt = {'data':[{"src":'7.jpg'},{"src":"2.jpg"},{"src":"4.jpg"}]};

    window.onscroll = function(){
        //封装一个函数判断是否具备加载条件
        if(checkScrollSlide()){
            var oParent = document.getElementById('main');
           //将数据块渲染到页面的尾部
            for(var i = 0;i<dataInt.data.length;i++){
                var oBox = document.createElement('div');
                oBox.className = "box";
                //创建oBox元素，将其添加到父元素的最后面
                oParent.appendChild(oBox);
                //创建图片盒子
                var oPic = document.createElement('div');
                oPic.className = "pic";
                oBox.appendChild(oPic);
                var oImg = document.createElement('img');
                oImg.src = "./picture/"+dataInt.data[i].src;
                oPic.appendChild(oImg);

            }
            waterfall('main','box');
        }
    }
}


function waterfall(parent,box){
    //将main下所有class为box的元素取出来

    var oParent = document.getElementById(parent);
   var oBoxs = getByClass(oParent,box);
   // console.log(oBoxs.length);
    //计算整个页面显示的列数(页面/box的宽)
    var oBoxW = oBoxs[0].offsetWidth;
    var cols = parseInt(document.documentElement.clientWidth/oBoxW);
    //设置main的总宽度
    oParent.style.cssText = 'width:'+ oBoxW*cols+'px;margin:0 auto';
    //定义一个数组，用于存储第一行所有元素的高度
    //存放每列高度的数组
    var hArr = [];

    for(var i = 0;i<oBoxs.length;i++){
        if(i<cols){
            hArr.push(oBoxs[i].offsetHeight);
        }else{
            var minH = Math.min.apply(null,hArr);
            //获取到最小值在数组中的索引
            var index = getMinhIndex(hArr,minH);
            oBoxs[i].style.position = 'absolute';
            oBoxs[i].style.top = minH + 'px';
            // oBoxs[i].style.left = oBoxW*index+'px';
            oBoxs[i].style.left = oBoxs[index].offsetLeft+'px';
            hArr[index] += oBoxs[i].offsetHeight;

        }
    }
    // console.log(hArr);
}


//根据class获取元素4
function getByClass(parent,clsName){
    //用来存储获取到的所有class为box的元素
    var boxArr = new Array();
    oElements = parent.getElementsByTagName("*");
    for(var i = 0;i<oElements.length;i++){
        if(oElements[i].className == clsName){
            boxArr.push(oElements[i]);
        }
    }
    return boxArr;

}
//找出数组中某个元素在数组中索引的位置
function getMinhIndex(arr,val){
    //遍历数组元素
    for(var i in arr){
        if(arr[i] == val){
            return i;
        }
    }
}
//检测是否具备了滚动加载数据块的条件
function checkScrollSlide(){

   var oParent = document.getElementById('main');
   var oBoxs = getByClass(oParent,'box');
   var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
   // console.log(oBoxs[oBoxs.length-1].offsetTop);
   // console.log(lastBoxH);
   //解决标准模式与混杂模式下获取滚动条滚动高度的兼容问题
   var scrollTop  = document.body.scrollTop || document.documentElement.scrollTop;
   console.log(scrollTop);
    var height = document.body.clientHeight || document.documentElement.clientHeight;
    //当用户拉动的距离大于页面最后一列
    var count = height+scrollTop;
    // console.log(count);
   return (lastBoxH < count)?true : false;
}

jQuery实现：

HTML部分代码和css代码与上面相同

$(window).on('load',function(){
    // alert(1);
    waterfall();
    var dataInt = {"data":[{"src":"1.jpg"},{"src":"3.jpg"},{"src":"01.jpg"},{"src":"05.jpg"}]}
    $(window).on('scroll',function () {
        if(checkScrollSlide()){
          $.each(dataInt.data,function (key,value) {
               //创建元素
              //jQuery 可以连缀，可以隐式迭代
              var oBox = $('<div>').addClass('bigbox').appendTo($('#main'));
              // console.log(oBox);
              var oPic = $('<div>').addClass('littlebox').appendTo(oBox);
              var oImg =  $('<img>').attr('src','./images/'+$(value).attr('src')).appendTo(oPic);
             // console.log($(value).attr('src'));
             //  $(oPic).append(oImg);
          })
            waterfall();
        }

    })
})
function waterfall() {
    //找到main下的一级div元素
    var $boxs = $('#main>div');
    //outWidth包含padding 和border
    var w = $boxs.eq(0).outerWidth();
    // var w = $boxs.eq(0).width();
    var cols = Math.floor($(window).width()/w);
    // alert(cols);
    //用width设置宽度的时候不需要设置单位
    $('#main').width(cols*w).css("margin","0 auto");
    var hArr = [];
    //第一个参数：元素索引  第二个参数：元素值
    $boxs.each(function (index,value) {
        //利用每个元素的索引值存储元素的高度
        var h = $boxs.eq(index).outerHeight();
        if(index<cols){
            hArr.push(h);
            // console.log(hArr);
        }else{
            var minH = Math.min.apply(null,hArr);
            //利用jQuery提供的数据来判断值为minH的元素在hArr中的索引
            var minHIndex = $.inArray(minH,hArr);
            // console.log(minHIndex);
           //value是DOM对象，无法使用jQuery对象的方法，我们需要将其转换为jQuery对象
            //我们使用$()将其转化为jQuery对象
            $(value).css({
                'position':'absolute',
                'top': minH + 'px',
                'left':minHIndex*w + 'px'
            })
            //改变数组的值
            hArr[minHIndex] += $boxs.eq(index).outerHeight();


        }
    })

}
//检测是否具备加载条件
function  checkScrollSlide() {
    //获取数组元素数组中的最后一个元素
    var $lastBox = $('#main>div').last();
    var lastBoxDis = $lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
    var scrollTop = $(window).scrollTop();
    var documentH = $(window).height();
    return(lastBoxDis< scrollTop+documentH)?true :false;

}

CSS3实现


#main{
    /*设置列宽*/
    /*-webkit-column-width:202px ;*/
    /*-moz-column-width: 202px;*/
    /*-o-columns-width:202px ;*/
    /*-ms-column-width:202px;*/
    -webkit-column-gap:30px;
    -moz-column-gap:5px;
    -o-columns-gap:5px;
    -ms-columngap:5px;
    /*-webkit-column-rule:2px dashed red ;*/
    /*-moz-column-rule:2px solid red ;*/
    /*-o-columns-rule:2px solid red ;*/
    /*-ms-columnrule:2px solid red ;*/
    -webkit-column-count:7;
    /*-moz-column-count:5;*/
    /*-o-columns-count:5 ;*/
    /*-ms-column-count:5;*/
}

.box{
    padding: 10px 0 0 15px;
}
.pic{
    padding: 10px;
    border:1px solid #ccc;
   border-radius: 5px;
    box-shadow: 0 0 5px;
    width: 165px;
}
.pic img{
    display: block;
    width: 165px;
    height: auto;
}

胡鹤婷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
瀑布流

JavaScript实现html代码部分<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scal
复制链接

扫一扫

专栏目录