三种瀑布流布局的实现 

//第一种实现方法：HTML+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="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
</div>
<script>
window.onload = function(){
waterfall('main','box');
//模拟json数据
var dataJson = {'data': [{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.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="./img/'+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>


//第二种瀑布流布局实现：HTML+css+jquery
<!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="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
</div>
<script>



$( window ).on( "load", function(){
 waterfall('main','box');
 //模拟数据json
var dataJson = {'data': [{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.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="./img/'+$(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;
}
</script>
</body>
</html>


 






第三种：css+HTML实现布局，JavaScript实现滚动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style>

.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%;
}
</style>
</head>
<body>
<div class="main clearfix" id="main">
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./img/c.jpg"></div>
</div>
</div>
<script>
window.onload = function(){
waterfall('main','box');
//模拟json数据
var dataJson = {'data': [{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.jpg'},{'src':'c.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="./img/'+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>






 


 




 






            

            
posted @ 
2018-01-02 19:25 
Don't差不多 
阅读(318) 
评论(0) 
编辑 
收藏 
举报