如何实现瀑布流布局-创新互联

如何实现瀑布流布局？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

index.html

• wf.css

@CHARSET "UTF-8";
*{margin:0;padding:0}
#main{
    position: relative;
    margin: 10px auto 0 auto;
}
.box{
    float:left;
    padding: 0 0 15px 15px; 
}
.pic{
    border: 1px solid #ccc;
    padding: 10px;
}
.box img{
    width: 200px;
    height: auto;
}

• wf.js

window.onload = function(){
    waterfall();
    //要加载的数据，暂时写一个固定数据
    var dataInt = {"data":[{"src":'3.jpg'},{"src":'13.jpg'},{"src":'23.jpg'},{"src":'1.jpg'}]};
    //一个判断拖动滚动条后是否加载新内容的方法
    window.onscroll = function(){
        if(checkScrollSlide()){
            //将数据块渲染到当前页的尾部
            for(var i = 0; i < dataInt.data.length;i++){
                var parent = document.getElementById('main');
                var newBox = document.createElement('p');
                newBox.className = 'box';
                parent.appendChild(newBox);
                var newPic = document.createElement('p');
                newPic.className = 'pic';
                newBox.appendChild(newPic);
                var newImg = document.createElement('img');
                newImg.src = "./imgs/" + dataInt.data[i].src;
                newPic.appendChild(newImg);
                waterfall();
            }
        }
    }
}
function waterfall(){
    var parent = document.getElementById("main");
    //写一个方法根据类名box，找到所有节点
    var boxArr = getByClass(parent,'box');
    //console.log(boxArr.length);//26，检验是否获取到
    var bodyWidth = document.body.clientWidth;
    //document.body.clientWidth  窗口实时显示时的body的宽度
    var colWidth = boxArr[0].offsetWidth;//box p的宽度
    var cols = Math.floor(bodyWidth / colWidth);
    //给main p一个宽度，从而让显示内容不会随着浮动，改变布局
    var mainWidth = colWidth * cols;
    parent.style.cssText = 'width:' + mainWidth + 'px;';
    var colsHeight = [];//放列高度的数组
    for(var i = 0; i < boxArr.length;i++){
        var iBox = boxArr[i];
        if(i < cols){
            colsHeight.push(iBox.offsetHeight);
        }else{
            var rArr = searchMin(colsHeight);
            var index = rArr[0];
            var minH = rArr[1];
            var left = parseInt(index * colWidth);
            var top = minH;
            iBox.style.position = "absolute";
            iBox.style.left = left + 'px';
            iBox.style.top = top + 'px';
            colsHeight[index] += iBox.offsetHeight;
        }
    }
}

function getByClass(parent,clsName){
    //用通配符获得prent下的所有标签节点
    var allTags = document.getElementsByTagName("*");
    var arr = new Array();
    for(var i = 0; i < allTags.length;i++){
        if(allTags[i].className == clsName){
            arr.push(allTags[i]);
        }
    }
    return arr;
}
function searchMin(arr){
    var min = arr[0];
    var index = 0;
    for(var j = 0; j < arr.length; j++){
        if(arr[j] < min){
            min = arr[j];
            index = j;
        }
    }
    return [index,min];    
}
function checkScrollSlide(){
    var parent = document.getElementById('main');
    var boxArr = getByClass(parent,'box');
    var lastBox = boxArr[boxArr.length-1];
    var lbHeight = lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2);
    console.log(lbHeight);
    var slideH = document.body.scrollTop || document.documentElement.scrollTop;
    console.log(slideH);
    var winH = document.body.clientHeight || document.documentElement.clientHeight;
    console.log(winH);
    var swHeight = slideH + winH;
    return (lbHeight < swHeight) ? true : false;
}

关于如何实现瀑布流布局问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联网站制作公司行业资讯频道了解更多相关知识。