首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

三种方式实现瀑布流布局

Posted in Javascript onFebruary 10, 2017

分别使用javascript，jquery，css实现瀑布流布局：

第一种方式：使用JavaScript：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style>
*{padding:0;margin:0;}
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="main clearfix" id="main">
<div class="box">
<div class="pic"><img src="./images/0.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/1.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/2.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/3.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/4.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/5.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/6.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/7.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/8.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/9.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/10.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/11.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/12.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/13.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/14.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/15.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/16.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/17.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/18.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/19.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/20.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/21.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/22.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/23.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/24.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/25.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/26.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/27.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/28.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/29.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/25.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/26.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/27.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/28.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/29.jpg"></div>
</div>
</div>
<script>
window.onload = function(){
waterfall('main','box');
//模拟json数据
var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};
//监听scroll事件
window.onscroll = function(){
var isPosting = false;
if(checkScollSlide('main','box') && !isPosting){
var oParent = document.getElementById('main');
for(var i in dataJson.data){
isPosting = true;
var oBox = document.createElement('div');
oBox.className = 'box';
oBox.innerHTML = '<div class="pic"><img src="./images/'+dataJson.data[i].src+'"></div>';
oParent.appendChild(oBox);
}
isPosting = false;
waterfall('main','box');
}
}
}
/*
* parent 父元素id clsName 块元素类*/
function waterfall(parent,clsName){
//获取父元素
var oParent = document.getElementById(parent),
//获取所有box
aBoxArr = oParent.getElementsByClassName(clsName),
//单个box宽度
iBoxW = aBoxArr[0].offsetWidth,
// 列数
cols = Math.floor(document.documentElement.clientWidth / iBoxW);
oParent.style.cssText = 'width:'+iBoxW*cols+'px;margin:0 auto;';
//储存所有的高度
var hArr = [];
for(var i = 0; i < aBoxArr.length; i++){
if(i < cols){
hArr[i] = aBoxArr[i].offsetHeight;
}else{
//获取hArr最小值
var minH = Math.min.apply(null,hArr),
// hArr最小值索引index
minHIndex = getMinHIndex(hArr,minH);
aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;';
//添加元素之后更新hArr
hArr[minHIndex] += aBoxArr[i].offsetHeight;
}
}
}
//获取最小值索引
function getMinHIndex(arr,val){
for(var i in arr){
if(arr[i] == val){
return i;
}
}
}
//检查是否满足加载数据条件,parent 父元素id clsName 块元素类
function checkScollSlide(parent,clsName){
var oParent = document.getElementById(parent),
aBoxArr = oParent.getElementsByClassName(clsName),
// 最后一个box元素的offsetTop+高度的一半
lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,
//兼容js标准模式和混杂模式
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
height = document.documentElement.clientHeight || document.body.clientHeight;
return lastBoxH < scrollTop + height ? true : false;
}
</script>
</body>
</html>

第二种方式：使用jquery：(html结构跟css同上)

$( window ).on( "load", function(){
 waterfall('main','box');
 //模拟数据json
 var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};
 window.onscroll=function(){
 var isPosting = false;
 if(checkscrollside('main','box') && !isPosting){
  isPosting = true;
  $.each(dataJson.data,function(index,dom){
  var $box = $('<div class="box"></div>');
  $box.html('<div class="pic"><img src="./images/'+$(dom).attr('src')+'"></div>');
  $('#main').append($box);
  waterfall('main','box');
  isPosting = false;
  });
 }
 }
});
/*
 parend 父级id
 clsName 元素class
 */
function waterfall(parent,clsName){
 var $parent = $('#'+parent);//父元素
 var $boxs = $parent.find('.'+clsName);//所有box元素
 var iPinW = $boxs.eq( 0 ).width()+15;// 一个块框box的宽
 var cols = Math.floor( $( window ).width() / iPinW );//列数
 $parent.width(iPinW * cols).css({'margin': '0 auto'});
 var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
 $boxs.each( function( index, dom){
 if( index < cols ){
  pinHArr[ index ] = $(dom).height(); //所有列的高度
 }else{
  var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
  var minHIndex = $.inArray( minH, pinHArr );
  $(dom).css({
  'position': 'absolute',
  'top': minH + 15,
  'left': $boxs.eq( minHIndex ).position().left
  });
  //添加元素后修改pinHArr
  pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了块框后的列高
 }
 });
}
//检验是否满足加载数据条件，即触发添加块框函数waterfall()的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
function checkscrollside(parent,clsName){
 //最后一个块框
 var $lastBox = $('#'+parent).find('.'+clsName).last(),
 lastBoxH = $lastBox.offset().top + $lastBox.height()/ 2,
 scrollTop = $(window).scrollTop(),
 documentH = $(document).height();
 return lastBoxH < scrollTop + documentH ? true : false;
}

第三种方式：使用css：(html结构同上)

.clearfix:after,
.clearfix:before {
 content: " ";
 display: table;
}
.clearfix:after {
 clear: both;
}
.main {
 position: relative;
 [color=#ff0000]-webkit-column-width: 210px;
 -moz-column-width: 210px;
 -webkit-column-gap: 5px;
 -moz-column-gap: 5px;[/color]
}
.box {
 float: left;
 padding: 15px 0 0 15px;
}
.box .pic {
 width: 180px;
 height: auto;
 padding: 10px;
 border-radius: 5px;
 box-shadow: 0 0 5px #cccccc;
 border: 1px solid #cccccc;
}
.box .pic img {
 display: block;
 width: 100%;
}

瀑布流实现方式比较：

Javascript原生方式/jquery方式

1、需要计算，列数 = 浏览器窗口宽度/图片宽度，图片定位是根据每一列的高度计算下来图片的位置；

2、图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范

Css方式

1、不需要计算，浏览器自动计算，只需设置列宽，性能高；

2、列宽随着浏览器窗口大小进行改变，用户体验不好；

3、图片排序按照垂直顺序排列，打乱图片显示顺序；

4、图片加载还是依靠javascript/jquery实现

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

三种方式实现瀑布流布局

- Author -

苏坡曼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 #Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 #Javascript
javascript常用的设计模式
Feb 09 #Javascript
简单实现js选项卡切换效果
Feb 09 #Javascript
原生JS轮播图插件
Feb 09 #Javascript
jQuery页面弹出框实现文件上传
Feb 09 #Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 #Javascript
越南购物网站(9) 马耳他购物网站(1) 北美洲购物网站(1) 巴基斯坦购物网站(2) 亚洲购物网站(6) 缅甸购物网站(1) 摩纳哥购物网站(1) 罗马尼亚购物网站(10) 乌克兰购物网站(27) 希腊购物网站(6)
You might like
PHP的FTP学习（一）[转自奥索]
2006/10/09 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
Nodejs极简入门教程（一）：模块机制
2014/10/25 NodeJs
微信小程序 开发MAP（地图）实例详解
2017/06/27 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[01:54]TI珍贵瞬间系列（五）：压力
2020/08/29 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
浅谈Python中的数据类型
2015/05/05 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
提升python处理速度原理及方法实例
2019/12/25 Python
基于python3生成标签云代码解析
2020/02/18 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python 实现任务管理清单案例
2020/04/25 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
python em算法的实现
2020/10/03 Python
英国手工布艺沙发在线购买：Sofas & Stuff
2018/03/02 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
出纳员岗位责任制
2014/02/11 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
2015初中团委工作总结
2015/07/28 职场文书
小学校园广播稿
2015/08/18 职场文书
python基础之停用词过滤详解
2021/04/21 Python
MySQL触发器的使用
2021/05/24 MySQL