JS瀑布流技术总结

最新推荐文章于 2019-09-23 14:07:46 发布

jacelynfish

最新推荐文章于 2019-09-23 14:07:46 发布

阅读量703

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/souzy/article/details/50655504

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS瀑布流技术总结

教程及代码来自极客学院http://www.jikexueyuan.com/course/218_3.html?ss=1

使用JS做瀑布流效果，最重要的技术要点是将所有图片中每一栏（column）看成一个整体，以第一行的图片高度作为基本基调，以后每安排一个图片的位置，都要查找之前图片整体中哪一栏的整体高度最小，把图片放在那一栏下面，然后更新那一栏的整体高度；下一张图片再次整体遍历各图片栏的高度，找出最小高度图片栏，以此类推。

基本步骤：

1. 获得整体图片的container，将container中所有id为box的标签储存到一个数组中

2. 获得一张图片的宽度（前提要在CSS中将所有图片的宽度设为一致），然后通过Math的floor方法计算出一个屏幕宽度内最多能放多少图片，以奠定第一行的基础

3. 用一个数组储存所有图片栏的高度（在遍历中，第一次遍历储存了第一行所有图片的高度），当i大于等于栏的数目时，开始所有图片的自适应

4. 在自适应中，使用Math.min.apply的方法找出所有图片中最小那栏的整体高度，然后找出所有图片中最小整体高度的图品栏最后的一个图片，获取该图片距离top和left的数据

5. 最后记得更新图片栏高度

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

function imgLocation(parent, content){
    var cparent = document.getElementById(parent);//获得container
    var ccontent = getChildElement(cparent, content);//使用函数获得container里面所有id为box的标签
    var imgWidth = ccontent[0].offsetWidth;//获得一个图片的宽度，以计算一个屏幕宽度里改放多少图片
    var cols = Math.floor(document.documentElement.clientWidth / imgWidth);//用floor方法将col转换为整数
    cparent.style.cssText = 'width:'+imgWidth*cols +'px;margin:0 auto;';//将container的宽度换为栏数*图片宽度

    //下面开始让所有图片的height适应
    var BoxHeightArr=[];//数组储存所有图片栏的高度
    for(var i = 0; i< ccontent.length; i++)
    {
        //第一行
        if(i<cols) {
            BoxHeightArr.push(ccontent[i].offsetHeight);
        }else{
            var minHeight = Math.min.apply(null, BoxHeightArr);//找出所有图片中最小那栏的整体高度
            var minIndex = getminheightLocation(BoxHeightArr, minHeight);//找出所有图片中最小整体高度那栏图片的最后一张的index

            ccontent[i].style.position = 'absolute';
            ccontent[i].style.top = minHeight +'px';
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px';

            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++)//遍历allcontent这个数组里的标签以寻找到box标签，一寻找到就将box标签的对象加入到contentArr这个数组里
    {
        if(allcontent[i].className == content)
        {
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr;//返回含有所有box标签的数组
}

一些特别技巧的应用：

1. 因为BoxHeightArr是对象的数组，因此不能直接用Math.min，于是用了Math.min.apply()的方法，将this设为null即可

2. 用JS设置一些表示距离的CSS元素时，记得最后加上单位如px

3. getElementsByTagName('*')星号可以获得所有的标签

4. style.cssText可以直接设置某元素的CSS内容