js瀑布流 原理实现揭秘 javascript 原生实现

　　web，js瀑布流揭秘

　　瀑布流再很久之前流行，可能如我一样入行晚的 ，可能就没有机会去使用。但是这个技术终究是个挺炫酷的东西，花了一个上午来研究，用原生js实现了一个，下面会附上源码，供大家解读。

　　说起瀑布流，其实实现原理特别简单，而且方法有很多，现在说一个大众的方法，所谓瀑布流就是 一堆样式差不多的 盒子排列在一起，排列规则是，插入到高度最低的那一列，所以，实现起来就很简单了，布局分 块，页面分列，计算每一列的高度，然后把块插入到列高度低的那一列，设置定位，left和top值就好了。

　　1.从布局开始，基本布局如下：

<div id="main">

　　<div class="box"><div class="fig"><img src="xxxx"></div></div>

</div>

　　main为父级大容器，用来盛放 块 box，所有的box都一样的  

　　2.style样式，基本样式如下：

*{padding: 0; margin: 0; box-sizing: border-box; -webkit-transition: all .3s;}
#main{
　　position: relative; //因为box要绝对定位，所以给父级设置相对定位
}

.box{
　　padding: 10px 5px 5px 10px;
　　float: left;
}
.fig{border: 1px #ccc solid; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,.6); padding: 5px;}
.fig img{width: 200px;}

　　3. 主要js如下：

;(function ($){


function show(el){
    el.style.display = 'block';
}
function hide(el){
    el.style.display = 'none';
}

function getById(id){
    return document.getElementById(id);
}

function getByClass(name,parent){
    var parent = parent ? document.getElementById(parent) : document;
    var eles = document.getElementsByTagName('*');
    var result = [];
    for(var i=0, len = eles.length; i < len; i++){
        if(eles[i].className == name){
            result.push(eles[i]);
        }
    }
    return result;
}

function getIndex(arr,val){
    for(var i in arr){
        if(arr[i] == val){
            return i;
        }
    }
    return -1;
}


var elMark = getById('Mark');
var baseUrl = "./images/";
var dataImg = {
    "data" : [
        {"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": '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'}
    ]
}

function WaterFull(insName){
    this.instance = insName;
    this.wrap = '';
    this.box = '';
    this.elwrap = '';
}
WaterFull.prototype = {
    init : function (parent, box){
        this.wrap = parent;
        this.box = box;
        this.elwrap = getById(parent);
        this.insertHtml();
    },
    insertHtml : function (){
        show(elMark);
        var self = this;
        for(var i=0, len = dataImg.data.length; i < len; i++){
            var url = baseUrl + dataImg.data[i].src;
            self.elwrap.appendChild(self.creatHtml(url));
        }
        setTimeout(function (){
            self.setPosition();
            hide(elMark);
        },400);
    },
    creatHtml : function (url){
        var box = document.createElement('div');
        box.className = this.box;
        var fig = document.createElement('div');
        fig.className = 'fig';
        box.appendChild(fig);
        var img = new Image();
        img.src = url;
        fig.appendChild(img);
        return box;
    },
    setPosition : function (){
        var hArr = [];
        var boxs = getByClass(this.box, this.wrap);
        var boxW = boxs[0].offsetWidth;
        var cols = Math.floor(document.body.clientWidth / boxW);
        this.elwrap.style.cssText = 'width: '+cols*boxW+'px;'+'margin: 0 auto;';
        for(var i=0, len = boxs.length; i < len; i++){
            if(i<cols){
                boxs[i].style.position = 'static';
                hArr.push(boxs[i].offsetHeight);
            }else{
                var minH = Math.min.apply(null, hArr);
                var colsIndex = getIndex(hArr, minH)
                if(colsIndex == -1){
                    alert("查询失败");
                    return false;
                }
                boxs[i].style.cssText = "position: absolute; top: "+minH+"px;"+"left: "+boxW*colsIndex+"px";
                hArr[colsIndex] += boxs[i].offsetHeight;
            }
        }
    },
    checkLoad : function (){
        var boxs = getByClass(this.box, this.wrap);
        var lastH = boxs[boxs.length -1].offsetTop + boxs[boxs.length -1].offsetHeight;
        var loadH = document.documentElement.clientHeight + document.body.scrollTop || document.documentElement.scrollTop;
        return lastH < loadH;
    }
}

function main(){
    var waterfull = new WaterFull();
    waterfull.init('main','box');
    window.onscroll = function (){
        if(waterfull.checkLoad.call(waterfull)){
            waterfull.insertHtml.call(waterfull);
        }
    }
    window.onresize = function (){
        waterfull.setPosition.call(waterfull);
    }
}

$.main = main;

}(this))

预览

全部js都在，如果需要全套代码的 ，麻烦联系我一下哈，QQ号：309093631

 

更多内容会经常更新，谢谢关注！！！