瀑布流（原创）

PROMULGATOR

龙

河北省唐山市

← 无限加载瀑布（原创）

→ js坐标轴（原创）

相关代码

瀑布流（原创）

jquery实现瀑布流显示

jquery瀑布流

无限加载瀑布（原创）

js水平布局瀑布流

自动适应瀑布流

jquery瀑布流布局

Html

Css

Js

* {
	margin:0;
	padding:0;
}
.main {
	position:relative;
	margin:auto;
}
.box {
	padding:15px 0 0 15px;
	width:165px;
	height:auto;
	float:left;
}
.pic {
	width:inherit;
	box-shadow:0 0 2px rgba(0,0,0,0.3);
	padding:10px;
	box-sizing:border-box;
	border-radius:5px;
}
.pic img {
	width:100%;
	height:auto;
	display:block;
}

window.onload = function() {
    // 1、获取元素
    var main = document.getElementsByClassName("main")[0];
    var box = main.getElementsByClassName("box");

function water() {
        // 2、计算列数
        var box_width = box[0].offsetWidth;
        var body_width = document.documentElement.clientWidth || document.body.clientWidth;
        var cols = Math.floor(body_width / box_width);
        // 3、计算墙的宽度-进而让其居中
        main.style.width = cols * box_width + "px";
        // 4、填坑
        var box_array = [];
        for (var i = 0; i < box.length; i++) {
            if (i < cols) {
                box_array.push(box[i].offsetHeight)
                // console.log(box_array)
            } else {
                var min_height = Math.min.apply(null, box_array);
                var min_index = box_array.indexOf(min_height);
                box[i].style.position = "absolute";
                box[i].style.left = box[min_index].offsetLeft + "px";
                box[i].style.top = min_height + "px";
                box_array[min_index] += box[i].offsetHeight;
            }
        }
    }
    water()
    //模拟数据
    var dataList = {
        "data": [{
                "src": "img/01.jpg"
            },
            {
                "src": "img/02.jpg"
            },
            {
                "src": "img/03.jpg"
            },
            {
                "src": "img/04.jpg"
            },
            {
                "src": "img/05.jpg"
            },
            {
                "src": "img/06.jpg"
            },
            {
                "src": "img/07.jpg"
            },
            {
                "src": "img/08.jpg"
            },
            {
                "src": "img/09.jpg"
            },
            {
                "src": "img/10.jpg"
            }
        ]
    }
    // 滑轮滚动
    window.onscroll = function() {
        var body_height = document.documentElement.clientHeight || document.body.clientHeight;
        var scroll_top = document.documentElement.scrollTop;
        var last_top = box[box.length - 1].offsetTop;
        if (scroll_top + body_height > last_top) {
            for (var i = 0; i < dataList.data.length; i++) {
                var newBox = document.createElement("div");
                newBox.className = "box animated rotateIn";
                main.appendChild(newBox);
                var newPic = document.createElement("div");
                newPic.className = "pic";
                newBox.appendChild(newPic);
                var newImg = document.createElement("img");
                newImg.src = dataList.data[i].src;
                newPic.appendChild(newImg)
            }
            water()
        }

}
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

瀑布流（原创）

代码描述：js书写，简单易懂

更新时间：2019-10-24 00:38:46

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>瀑布流（原创）-jq22.com</title> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号