瀑布流布局--原生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 ...
随机推荐
- uva331 - Mapping the Swaps
Mapping the Swaps Sorting an array can be done by swapping certain pairs of adjacent entries in the ...
- 解决黑苹果与windows时区不一致
原理就是将windows识别硬件时间为UTC-0而不是现在的UTC+8 下面都是抄来的 注册表HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\T ...
- jQuery操作checkbox选择
1.checkbox list选择 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- (转)用AGG实现高质量图形输出(三)
转自 :http://www.cnblogs.com/CoolJie/archive/2011/04/27/2030260.html 线段生成器(Span Generator) 我们前面举的例子使用的 ...
- sqlserver 各种判断是否存在(表名、函数、存储过程等)
库是否存在 if exists(select * from master..sysdatabases where name=N'库名') print 'exists'elseprint 'not ex ...
- Graylog2+mongdb+rsyslog中央日志服务器对syslog的web管理--转载
原文地址:http://blog.sina.com.cn/s/blog_49be4d570100yvv1.html 1.下载mongodb,可以通过下面2中方法安装. (1)官网下载yum源后直接安装 ...
- SQL性能优化十条经验
1.查询的模糊匹配 尽量避免在一个复杂查询里面使用 LIKE '%parm1%'—— 红色标识位置的百分号会导致相关列的索引无法使用,最好不要用. 解决办法: 其实只需要对该脚本略做改进,查询速度便会 ...
- C. Anya and Smartphone
C. Anya and Smartphone time limit per test 1 second memory limit per test 256 megabytes input standa ...
- iOS 网络/本地 图片 按自定义比例缩放 不失真 方法
我尝试了很多种方法,终于,设计了一个方法,能按自己规定的大小压缩 还没失真 如果以后不好用 我再升级 分享给大家: + (CGRect )scaleImage:(UIImage *)image toS ...
- ios 加载本地html css文件 ps:css和html必须在同一文件夹下面
NSString *path = [[NSBundle mainBundle] bundlePath]; NSURL *baseURL = [NSURL fileURLWithPath:path]; ...