简单图片瀑布流

最新推荐文章于 2023-10-21 13:25:00 发布

R_March

最新推荐文章于 2023-10-21 13:25:00 发布

阅读量606

点赞数 1

分类专栏： js之瀑布流文章标签：瀑布流

本文链接：https://blog.csdn.net/cainiao_xiao_bai/article/details/77869201

版权

js之瀑布流专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>瀑布流</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/瀑布流.css" />
        <script type="text/javascript" src="../js/basics.js"></script>
        <script type="text/javascript" src="../js/瀑布流.js"></script>
    </head>
    <body>
        <div class="item"><img src="../img/瀑布流/img (1).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (2).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (3).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (4).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (5).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (6).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (7).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (8).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (9).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (10).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (11).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (12).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (13).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (14).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (15).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (16).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (17).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (18).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (19).jpg"/></div>
        <div class="item"><img src="../img/瀑布流/img (20).jpg"/></div>
    </body>
</html>

CSS部分

.item{
    width: 188px;
    float: left;
    margin-right: 5px;
}
.item img{
    width: 180px;
    padding: 3px;
    border: solid 1px #CCCCCC;
}

JSb部分

/*
 * 思路：
 * 第一行的图片正常显示
 * 从第二行开始将图片逐个加到最短的列的后面
 * 实现：
 * 1、根据浏览器的窗口大小调整列数
 * 2、第一行的图片不定位，正常显示
 * 3、记录所有列的最小高度和最小高度对应的是第几列的
 * 4、从第二行开始将图片设置为相对定位，left值为最小高度对应的元素的offsetLeft,top值为最小高度（这里的已定位父级未设置，则为body）
 * 5、更新原来的最小高度位置的高度值
 * 
 * 
 * 下拉刷新：
 * 1、判断临界值:最后一张图片的offsetTop <= 浏览器的高度 + 滚动条的高度时候，加载新的内容
 * 2、用循环创建用创建新的div,class名为item,加上子节点img
 * 
 * 
 * 注意点：
 * 1、for(var i = 0;i < items.length;i++)所有的包含图片的div都要判断，所以是i < items.length;
 * 2、var minHeight = columnHeightArr[0];  判断图片时每次都要重新创建，用于保存最新的最小高度和最小高度所在的位置
      var minHeightIndex = 0;
 */


window.onload = window.onresize = function(){
    layout();
}

function layout(){
    var items = document.getElementsByClassName('item');

    //列数
    var column = Math.floor(document.documentElement.clientWidth/items[0].offsetWidth);

    var columnHeightArr = [];
    console.log( items.length);
    for(var i = 0;i < items.length;i++){
        if(i < column){
            items[i].style.position = 'static';
            columnHeightArr.push(items[i].offsetHeight);
        }else{
            items[i].style.position = 'absolute';

            var minHeight = columnHeightArr[0];  //每一次重新判断，所有要定义在里面
            var minHeightIndex = 0;
            for(var j = 0;j < columnHeightArr.length;j++){

                if(columnHeightArr[j] < minHeight){
                    minHeight = columnHeightArr[j];
                    minHeightIndex = j;
                }
            }


            items[i].style.left = items[minHeightIndex].offsetLeft + 'px';
            items[i].style.top = minHeight + 'px';

            columnHeightArr[minHeightIndex] += items[i].offsetHeight;
        }   
    }
};

//下拉更新
window.onscroll = function(){
    var items = document.getElementsByClassName('item');

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    var clientHeight = document.documentElement.clientHeight;

    if(items[items.length-1].offsetTop <= (scrollTop+clientHeight)){
        for(var i = 21;i <= 42;i++){
            var oDiv = document.createElement('div');
            oDiv.className = 'item';
             var oImg = document.createElement('img');
             oImg.src = '../img/瀑布流/img ('+i+').jpg';
             oDiv.appendChild(oImg);
            document.body.appendChild(oDiv);
        }
        layout();
    }
};

R_March

关注

1
点赞
踩
3

收藏

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

html部分<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>瀑布流</title> <link rel="stylesheet" type="text/css" href="../css/reset.css" /> <link rel="stylesheet
复制链接

扫一扫