js 原生 瀑布流布局，瀑布流布局

其他 2018-10-25 19:10:10 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/csl125/article/details/81808872

HTML代码

<!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>瀑布流布局</title>
    <link rel="stylesheet" href="css/pbl.css">
    <script src="js/pbl.js"></script>
</head>

<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="img/0.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/4.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="pic">
                <img src="img/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/14.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/15.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/16.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/17.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/18.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/19.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/20.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/21.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/22.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/23.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/24.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/25.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/26.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/27.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/28.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/29.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;
    box-shadow: 0 0 5px #ccc;
}
.pic img{
    width: 180px;
    height: auto;
}

js代码

window.onload = function () {
    waterfall("main", "box");
    var dataInt = {
        "data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},{"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},{"src":"15.jpg"},{"src":"16.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';
                oParent.appendChild(oBox);
                var oPic = document.createElement('div');
                oPic.className = 'pic';
                oBox.appendChild(oPic);
                var oImg = document.createElement('img');
                oImg.src = "img/"+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 =  Math.floor(document.documentElement.clientWidth/oBoxW);
    console.log(cols)
    // 设置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获取元素
function getByclass(parent,clsName){
    var boxArr = new Array(),//用来存储获取到的所有为box的元素
    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);
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.body.clientHeight || document.documentElement.clientHeight;
    return (lastBoxH<scrollTop+height)?true:false;
}

。。。。。。。。。。。。。。。分割线。。。。。。。。。。。。。。。。。。。。。。。。。

有一种简单的css3布局的方法，基本实现需求

html代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>纯CSS3实现的瀑布流</title>
	<link type="text/css" rel="stylesheet" href="css/waterfall.css" />
</head>
<body>
	<div class="container">
		<div><img src="images/P_00.jpg" /></div>
		<div><img src="images/P_01.jpg" /></div>
		<div><img src="images/P_02.jpg" /></div>
		<div><img src="images/P_03.jpg" /></div>
		<div><img src="images/P_04.jpg" /></div>
		<div><img src="images/P_05.jpg" /></div>
		<div><img src="images/P_06.jpg" /></div>
		<div><img src="images/P_07.jpg" /></div>
		<div><img src="images/P_08.jpg" /></div>
		<div><img src="images/P_09.jpg" /></div>
		<div><img src="images/P_010.jpg" /></div>
		<div><img src="images/P_011.jpg" /></div>
		<div><img src="images/P_012.jpg" /></div>
		<div><img src="images/P_013.jpg" /></div>
		<div><img src="images/P_014.jpg" /></div>
		<div><img src="images/P_015.jpg" /></div>
		<div><img src="images/P_016.jpg" /></div>
		<div><img src="images/P_017.jpg" /></div>
		<div><img src="images/P_018.jpg" /></div>
		<div><img src="images/P_019.jpg" /></div>
		<div><img src="images/P_05.jpg" /></div>
		<div><img src="images/P_06.jpg" /></div>
		<div><img src="images/P_07.jpg" /></div>
		<div><img src="images/P_08.jpg" /></div>
		<div><img src="images/P_09.jpg" /></div>
		<div><img src="images/P_010.jpg" /></div>
		<div><img src="images/P_011.jpg" /></div>
		<div><img src="images/P_012.jpg" /></div>
		<div><img src="images/P_013.jpg" /></div>
		<div><img src="images/P_05.jpg" /></div>
		<div><img src="images/P_06.jpg" /></div>
		<div><img src="images/P_07.jpg" /></div>
		<div><img src="images/P_08.jpg" /></div>
		<div><img src="images/P_09.jpg" /></div>
		<div><img src="images/P_010.jpg" /></div>
		<div><img src="images/P_011.jpg" /></div>
		<div><img src="images/P_012.jpg" /></div>
		<div><img src="images/P_013.jpg" /></div>
		<div><img src="images/P_03.jpg" /></div>
		<div><img src="images/P_04.jpg" /></div>
		<div><img src="images/P_05.jpg" /></div>
		<div><img src="images/P_06.jpg" /></div>
		<div><img src="images/P_07.jpg" /></div>
		<div><img src="images/P_08.jpg" /></div>
		<div><img src="images/P_09.jpg" /></div>
	</div>
</body>
</html>

css代码

.container{
    -webkit-column-width:160px;
    -moz-column-width:160px; 
	  -webkit-column-gap:5px;
	  -moz-column-gap:5px;
}


/*数据块 砖块*/

.container div{width:160px;
               margin:4px 0;}

猜你喜欢

转载自blog.csdn.net/csl125/article/details/81808872
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022