原生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 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
写的htc的数据表格
Jan 20 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
2014年9.18纪念日演讲稿
2014/09/14 职场文书
会议欢迎词范文
2015/01/27 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
患者身份识别制度
2015/08/06 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
如何通过cmd 连接阿里云服务器
2022/04/18 Servers