编程 Javascript

原生JavaScript+LESS实现瀑布流

Posted in Javascript onDecember 12, 2014

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

 <body>

     <div id="main">

         <div class="box">

             <div class="pic">

                 <img src="images/0.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/1.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/2.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/3.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/4.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/2.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/3.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/4.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/5.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/6.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/7.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/3.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/4.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/5.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/3.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/4.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/5.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/6.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/7.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/3.jpg" alt="">

             </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时就完成一个了循环，即这一行插入进去了，。
然后进入下一个循环插入下一行。

原生JavaScript+LESS实现瀑布流

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js FLASH幻灯片字符串中有连接符＆的处理方法

Mar 01 Javascript

JavaScript 和 Java 的区别浅析

Jul 31 Javascript

简洁Ajax函数处理(示例代码)

Nov 15 Javascript

javascript实现checkBox的全选，反选与赋值

Mar 12 Javascript

Angularjs 动态添加指令并绑定事件的方法

Apr 13 Javascript

vue2 前后端分离项目ajax跨域session问题解决方法

Apr 27 Javascript

JavaScript实现无穷滚动加载数据

May 06 Javascript

Javarscript中模块(module)、加载(load)与捆绑(bundle)详解

May 28 Javascript

javascript 玩转Date对象(实例讲解)

Jul 11 Javascript

jquery.picsign图片标注组件实例详解

Feb 02 jQuery

vue组件实现弹出框点击显示隐藏效果

Oct 26 Javascript

JavaScript实现图片懒加载的方法分析

Jul 05 Javascript

jquery禁止回车触发表单提交

Dec 12 #Javascript

完美兼容各大浏览器的jQuery插件实现图片切换特效

Dec 12 #Javascript

windows8.1+iis8.5下安装node.js开发环境

Dec 12 #Javascript

jQuery 和 CSS 的文本特效插件集锦

Dec 12 #Javascript

js使用递归解析xml

Dec 12 #Javascript

做web开发先学JavaScript

Dec 12 #Javascript

兼容主流浏览器的JS复制内容到剪贴板

Dec 12 #Javascript