管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

原生JavaScript+LESS实现瀑布流

　　HTML(注意包裹关系,方便js调用)

复制代码代码如下:

　　<body>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</body>

　　LESS(less预编译)

复制代码代码如下:

　　* {

　　margin: 0;

　　padding: 0;

　　}

　　#main {

　　position: relative;

　　}

　　.box {

　　padding:15px 0 0 15px;

　　float:left;

　　}

　　.pic {

　　padding: 10px;

　　border: 1px solid #ccc;

　　border-radius: 5px;

　　box-shadow: 0px 0px 5px #ccc;

　　img {

　　width:165px;

　　height:auto;

　　}

　　JavaScript(自己理解的注解)

　　(函数存在一定瑕疵,仅用于学习理解)

复制代码代码如下:

　　window.onload = function () {

　　waterfall("main","box");

　　//调用自定义函数;作用于main下的每一个box元素;

　　var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}

　　//模拟json数据;

　　window.onscroll = function () {

　　if (checkScrollSlide) {

　　//调用自定义函数;根据函数返回值确定滚动是否超出范围;

　　var oParent = document.getElementById("main");

　　for (var i = 0; i < dataInt.data.length; i++) {

　　var oBox = document.createElement("div");

　　oBox.className = "box";

　　oParent.appendChild(oBox);

　　//创建box块

　　var oPic = document.createElement("div");

　　oPic.className = "pic";

　　oBox.appendChild(oPic);

　　//创建pic块

　　var oImg = document.createElement("img");

　　//创建img元素

　　oImg.src = "images/"+dataInt.data[i].src;

　　//设置图片引用;

　　oPic.appendChild(oImg);

　　};

　　waterfall("main","box");

　　//将动态生成的数据块进行流式布局;

　　};

　　//流式布局主函数,自动调整数据块的位置;

　　function waterfall (parent,box) {

　　//将main下的所有box元素取出;"parent"代表父级,box代表box元素;

　　var oParent = document.getElementById(parent);

　　//将父级元素赋值给变量oParent;

　　var oBoxs = getByClass(oParent,box);

　　//通过自定义函数,获取父级下的每一个box元素;得到的是所有box元素的集合;

　　//再次将这个得到的box元素的集合赋值给oBoxs;(因为作用域问题,变量不共用);

　　// console.log(oBoxs.length);

　　//在控制台中打印出box元素的数量,用于调试;

　　var oBoxW = oBoxs[0].offsetWidth;

　　//计算出每一列的宽度;offsetWidth包含内边距在内的宽度;

　　// console.log(oBoxW);测试;

　　var cols = Math.floor(document.documentElement.clientWidth/oBoxW);

　　//计算整个页面显示的列数(页面宽/box的宽);

　　oParent.style.cssText = "width:"+oBoxW*cols+"px;margin:0 auto";

　　//父元素main的宽度=每一列的宽*列数;并且左右居中;

　　var hArr = [];

　　//存放每一列高度的数组;

　　for (var i = 0; i < oBoxs.length; i++) {

　　//遍历oBoxs数组;

　　if (i<cols) {

　　//这里符合条件的是第一行的每列的第一个;

　　hArr.push(oBoxs[i].offsetHeight);

　　//得出每一列的高度放入数组中;

　　}else{

　　//这里的box元素已经不是第一行的元素了;

　　var minH = Math.min.apply(null,hArr);

　　//得出第一行的最小高度并赋值给变量;

　　// console.log(minH);

　　var index = getMinhIndex(hArr,minH);

　　//调用自定义函数获取这个变量的index值;

　　oBoxs[i].style.position = "absolute";

　　oBoxs[i].style.top = minH+"px";

　　oBoxs[i].style.left = oBoxW*index+"px";

　　//设置当前元素的位置;

　　//当前元素的left值=顶上的元素的index值*每列的宽度;

　　//oBoxs[i].style.left = oBoxs[index].offsetLeft+"px";

　　//第二种获取当前元素的left值;

　　//此时在第index列添加了一个box元素;

　　hArr[index]+=oBoxs[i].offsetHeight;

　　//每一列更新后的高度=每一列原来的高度+后来添加的box元素的高度;

　　};

　　//js原生通过Class获取元素;

　　function getByClass (parent,claName) {

　　//通过class获取元素;(在父级parent的容器下获取claName的元素;)

　　var boxArr = new Array();

　　//声明数组,用来存储获取到的所有class为box的元素;

　　var oElements = parent.getElementsByTagName("*")

　　//声明变量用来存储此父元素下的所有子元素(*);

　　for (var i = 0; i < oElements.length; i++) {

　　//遍历数组oElements;

　　if (oElements[i].className==claName) {

　　//如果数组中的某一个元素的calss类与参数claName相同;

　　boxArr.push(oElements[i]);

　　//则把遍历到的这个box元素归类到boxArr数组;

　　};

　　return boxArr;

　　//调用数组后,经过一系列函数,遍历;将得到的数组返回给调用的函数;

　　};

　　//获取数组元素的index值;

　　function getMinhIndex (arr,val) {

　　//arr是父级数组;val是当前元素;

　　for(var i in arr){

　　//从0开始遍历;

　　if(arr[i]==val){

　　//找到当前元素在数组中对应的index值;

　　return i;

　　//函数返回值即是当前元素的index值;

　　};

　　//检测是否具备了滚动加载数据块的条件;

　　function checkScrollSlide () {

　　var oParent = document.getElementById("main");

　　var oBoxs = getByClass(oParent,"box");

　　var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);

　　//最后一个box元素距离页面顶部的高度(找到最后一个box(oBoxs.lenght-1)的offsetTop)+自身的一半;

　　var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

　　//浏览器滚动条滚动的距离;

　　// console.log(scrollTop);

　　var height = document.body.clientHeight || document.documentElement.clientHeight;

　　//浏览器视口的高度;

　　// console.log(height);

　　return (lastBoxH<scrollTop+height)?true:false;

　　//页面滚动的距离是否大于最后一个box元素的offsetTop;

　　};

　　总结：

　　用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用css3实现，很简单，谷歌一下你就知道。

　　我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环，即这一行插入进去了，。

　　然后进入下一个循环插入下一行。

教程首页更多教程