JS瀑布流技术总结

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内容