瀑布流效果

Html

Css

html,body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
#main {
	position:relative;
}
#main div {
	position:absolute;
	background-color:green;
	transition:all 0.35s ease;
}

function aa() {
    var oMain = document.getElementById('main');
    var ITEM_WIDTH = 200;
    var ITEM_SPACE = 10;
    var itemArray = [];
    var itemHeight = [];

// 求随机数
    function rand(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min);
    }

function createItem(min, max) {
        for (var i = min; i < max; i++) {
            var div = document.createElement('div');
            div.innerHTML = i;
            div.style.height = rand(100, 300) + 'px';
            div.style.width = ITEM_WIDTH + 'px';
            div.style.backgroundColor = 'rgb(' + rand(0, 255) + ',' + rand(0, 255) + ',' + rand(0, 255) + ')';
            oMain.appendChild(div);
            itemArray[i] = div;
        }
        layout();
    }

createItem(0, 30);

//div的布局
    function layout() {
        var t = 0;
        var l = 0;
        var frist = true;
        var mainWidth = 0;
        var winWidth = document.documentElement.clientWidth || document.body.clientWidth;

for (var i = 0; i < itemArray.length; i++) {
            if ((l + ITEM_WIDTH) >= winWidth) {
                frist = false;
                mainWidth = l;
                l = 0;
            }
            if (frist) {
                itemArray[i].style.top = t + 'px';
                itemArray[i].style.left = l + 'px';
                itemHeight[i] = itemArray[i].offsetHeight;
            } else {
                var min = getMin(itemHeight);
                for (var j = 0; j < itemHeight.length; j++) {
                    if (itemHeight[j] == min) {
                        itemArray[i].style.top = min + ITEM_SPACE + 'px';
                        itemArray[i].style.left = j * (ITEM_WIDTH + ITEM_SPACE) + 'px';
                        itemHeight[j] += (itemArray[i].offsetHeight + ITEM_SPACE);
                        break;
                    }
                }
            }
            l += ITEM_WIDTH + ITEM_SPACE;
        }
        // oMain居中
        var w = mainWidth - ITEM_SPACE;
        oMain.style.width = w + 'px';
        oMain.style.left = (winWidth - w) / 2 + 'px';

}

//求最小值
    function getMin(aArray) {
        var min = aArray[0];
        for (var i = 0; i < aArray.length; i++) {
            if (min > aArray[i]) {
                min = aArray[i];
            }
        }
        return min;
    }

window.onresize = function() {
        itemHeight = [];
        layout();
    }

// 滚动滚动条达到最长的一个hight时，加载出更多
    window.onscroll = function() {
        var scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
        var winHeight = document.body.clientHeight || document.documentElement.clientHeight;
        var max = Math.max.apply(null, itemHeight);
        var num = 0;
        if ((scrollHeight + winHeight) >= max - 30) {
            num = itemArray.length;
            createItem(num, num + 10);
        }
    }

}
aa();

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

立即下载

瀑布流效果



代码描述：js无限加载瀑布流效果

3

最新

发表评论全部评论

暂时没有评论！

夜白的夜白0

2017/5/2 11:50:48

好神奇啊
回复

CH.Rxin0

2017/4/27 17:51:25

请问这个瀑布流怎么实现里面每个div的内容不一样呢，

纷飞舞1

2017/4/28 11:10:03

main.append("<div><img src='imgs/"+rand(1,39)+".jpg'/><p>"+i+"</p></div>");
这是我另外用jQuery写的，你可以按照你的需要修改一下

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

纷飞舞

相关代码

瀑布流效果

最新