首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
浅谈Vue数据响应思路之数组
Nov 06 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 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
reload(1) SSL(3) 二级域名(1) 反向代理(2) 前后端分离(1) shell(3) 443(1) URL重定向(3) 压力测试(1) 默认端口(3)
You might like
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
js 实现无干扰阴影效果 简单好用（附文件下载）
2009/12/27 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python中修改字符串的四种方法
2018/11/02 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Python中join（）函数多种操作代码实例
2020/01/13 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
python爬取招聘要求等信息实例
2020/11/20 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
一份Java笔试题
2012/02/21 面试题
九年级化学教学反思
2014/01/28 职场文书
咖啡店创业计划书
2014/08/15 职场文书
公司市场部岗位职责
2015/04/15 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript