原生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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 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
You might like
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
Python中的闭包实例详解
2014/08/29 Python
python的文件操作方法汇总
2017/11/10 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
如何通过python实现人脸识别验证
2020/01/17 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
实习自我鉴定模板
2013/09/28 职场文书
管理部部长岗位职责
2013/12/05 职场文书
劲霸男装广告词
2014/03/21 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
2014年实习生工作总结
2014/11/27 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
新闻稿怎么写
2015/07/18 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python