瀑布流Demo

作者: 机器猫的百宝袋 | 来源:发表于2015-09-01 11:46 被阅读190次

iOS瀑布流
Swift实现UICollectionView支持多 secti
瀑布流Demo
瀑布流Demo
kotlin瀑布流demo
# 瀑布流实现Demo
UICollectionView 瀑布流demo
瀑布流布局的实现
瀑布流布局_木桶布局
iOS-个人整理24 - 瀑布流效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" type="text/css" href="瀑布流.css">
    <script src="瀑布流.js"></script>
</head>
<body>
    <div id = "container">
        <div class="box">
            <div class="box_img">
                <img src="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="">
            </div>
        </div>
        <div class="box">
            <div box_img>
                <img src="">
            </div>
        </div>
    </div>
</body>
</html>

*{
    margin: 0px;
    padding: 0px;
}
#container{
    position: relative;/*相对布局*/
}
.box{
    padding: 5px;
    float: left;
}
.box_img{
    padding: 5px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}
.box_img img{
    width: 150px;
    height: auto;
}

window.onload = function () {
    imgLocation("container", "box");

    var imgData = {"data": [{"src": "图片"}, {"src": "图片"}, {"src": "图片"}, {"src": "图片"}]}
    window.onscroll = function () {
        if (checkFlag()) {
            var cparent = document.getElementById("container");
            for (var i = 0; i < imgData.data.length; i++) {
                var ccontent = document.createElment("div");
                ccontent.className = "box";
                cparent.appendChild(ccontent);
                var boximg = document.createElement("div");
                boximg.className = "box_img";
                ccontent.appendChild(boximg);
                var img = document.createElement("img");
                img.src = imgData.data[i].src
                boximg.appendChild(img);
            }
            imgLocation("container", "box");
        }
    }
}

function checkFlag() {
    var cparent = docement.getElementById("container");
    var ccontent = getChildElement(cparent, "box");
    var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;//最后一张图距顶部的高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (lastContentHeight < scrollTop + pageHeight) {
        return true;
    }
}


function imgLocation(parent, content) {
    //将parent下的所有内容全部取出
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent, content);
    //console.log(ccontent.length);
    var imgWidth = ccontent[0].offsetWidth;
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);
    cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0 auto";

    var BoxHeightArr = [];
    for (var i = 0; i < ccontent.length; i++) {
        if (i < num) {
            BoxHeightArr[i] = ccontent[i].offsetHeight;
        } else {
            var minHeight = Math.min.apply(null, BoxHeightArr);
            //console.log(BoxHeightArr[i]);
            var minIndex = getMinHeightLocation(BoxHeightArr, minHeight);
            ccontent[i].style.position = "absolute";
            ccontent[i].style.top = minHeight + "px";
            ccontent[i].style.left = ccontent[minIndex].offsetLefta + "px";
            BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
        }
    }
}
function getMinHeightLocation(BoxHeightArr, minHeight) {
    for (var i in BoxHeightArr) {
        if (BoxHeightArr[i] == minHeight) {
            return i;
        }
    }
}
function getChildElement(parent, content) {
    var contentArr = [];
    var allContent = parent.getElementsByTagName("*");
    for (var i = 0; i < allContent.length; i++) {
        if (allContent[i].className == content) {
            contentArr.push(allContent[i]);//向其末未进行追加
        }
    }
    return contentArr;
}