编程 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 相关文章推荐

HTML TO JavaScript 转换

Jun 26 Javascript

extjs ColumnChart设置不同的颜色实现代码

May 17 Javascript

jquery和javascript中如何将一元素的内容赋给另一元素

Jan 09 Javascript

浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法

May 11 Javascript

javascript实现iframe框架延时加载的方法

Oct 30 Javascript

jQuery EasyUI实现右键菜单变灰不可用效果

Sep 24 Javascript

java中String类型变量的赋值问题介绍

Mar 23 Javascript

全面解析JavaScript中apply和call以及bind(推荐)

Jun 15 Javascript

JavaScript 冒泡排序和选择排序的实现代码

Sep 03 Javascript

bootstrap中添加额外的图标实例代码

Feb 15 Javascript

Node.js利用断言模块assert进行单元测试的方法

Sep 28 Javascript

React中使用Vditor自定义图片详解

Dec 25 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