三种方式实现瀑布流布局


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实现

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

Javascript 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
js里面的变量范围分享
Jul 18 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 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
You might like
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014年领班工作总结
2014/11/25 职场文书
公司放假通知怎么写
2015/04/15 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
求职信如何撰写?
2019/05/22 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers