瀑布流布局--原生JavaScript

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

 <body>

     <div id="main">

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

         <div class="box">

             <div class="pic">

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

             </div>

         </div>

     </div>

 </body>

LESS(less预编译)

 * {

     margin:;

     padding:;

 }

 #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;

 };

瀑布流布局--原生JavaScript的更多相关文章

JavaScript——基本的瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
页面瀑布流布局的实现 javascript+css
先看所谓的瀑布流布局在不使用瀑布流布局的情况下,当页面要显示不同高度的图片时,会如下面显示下面的元素总是和最靠近它的元素对齐. 为了使元素能够在我们想要的位置上显示,我们使用绝对定位. 说一下大体 ...
使用原生javascript实现瀑布流
简介瀑布流布局是一种很常见的布局方式,他的主要视觉体验为图片元素等宽不等高,图片元素之间的水平排序参差不齐,而且随着滚动条的滚动,数据会进行异步的加载,这样的布局有两个好处,1-有视觉的冲击力,比较 ...
javascript实例学习之五——瀑布流布局
瀑布流布局的特征: 1,各列的高度参差不齐 2,页面向下滚动时,自动请求和加载新数据目前,瀑布流布局的主流实现方式有两种: 1,基于浮动,每一列是一个ul,这些ul都向左浮动,这种方法的好处是布局容 ...
JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
Django 项目补充知识（JSONP,前端瀑布流布局，组合搜索，多级评论）
一.JSONP 1浏览器同源策略通过Ajax,如果在当前域名去访问其他域名时,浏览器会出现同源策略,从而阻止请求的返回由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一 ...
CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
jquery实现简单瀑布流布局
jquery实现简单瀑布流布局是开头都会说的原理瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

随机推荐

C++ for循环效率
1.考虑二维数组,在C++中,以先行后列的方式存储连续的数组元素.也就是同一行的元素在一起,同一列的元素之间有间隔,且间隔相同.理想情况下,二维数组的元素是随机访问的,可以直接定位,即i*列数+j.因 ...
Looksery Cup 2015 H. Degenerate Matrix 数学
H. Degenerate Matrix Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/549/ ...
删除sqlserver2008登录记录
SQL Server Management Studio登陆窗口清空这些多余的登陆名删除SqlStudio.bin文件 WinXP: C:\Documents and Settings\用户文件夹 ...
google对js延迟加载方案的建议
浏览器在执行JavaScript代码时会停止处理页面,当页面中有很多JavaScript文件或代码要加载时,将导致严重的延迟.尽管可以使用defer.异步或将JavaScript代码放到页面底部来延迟 ...
Android开发目录
1.ADT下载地址整理 2.之前的Android项目报错,新建Android项目报错,代码中找不到错误解决方案 3.错误“Unexpected namespace prefix "xmlns ...
使用boost的deadline_timer实现一个异步定时器
概述最近在工作上需要用到定时器,然后看到boost里面的deadline_timer可以实现一个定时器,所以就直接将其封装成了ATimer类,方便使用,ATimer有以下优点: 可以支持纳秒.毫秒. ...
iOS本机生成证书请求文件流程
第一步:苹果机上打开“Finder”,选择“应用程序”,双击打开“实用工具” 第二步:在“实用工具”中,选“择钥匙串访问”,双击打开第三步: “钥匙串访问”打开,看到如下页面第四步:选择菜单中“钥 ...
hadoop2 作业执行过程之map过程
在执行MAP任务之前,先了解一下它的容器和它容器的领导:container和nodemanager NodeManager NodeManager(NM)是YARN中每个节点上的代理,它管理Hadoo ...
web前端知识体系大全
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
find the nth digit
Problem Description 假设:S1 = 1S2 = 12S3 = 123S4 = 1234.........S9 = 123456789S10 = 1234567891S11 = 12 ...

瀑布流布局--原生JavaScript

瀑布流布局--原生JavaScript的更多相关文章

随机推荐

热门专题