• 三种瀑布流布局的实现


    //第一种实现方法: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 = ''+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 = ''+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>
    
    
    
     
  • 相关阅读:
    POJ 1741 Tree(树分治)
    HDU 2196 Computer(树形dp)
    2015沈阳区域赛Meeting(最短路 + 建图)
    make the fence great again(dp 二维)
    2017沈阳区域赛Infinite Fraction Path(BFS + 剪枝)
    bitset详解
    2016青岛区域赛.Coding Contest(费用流 + 概率计算转换为加法计算)
    2019上海网络赛B题(差分 + 离散化 or 差分 + 思维)
    poj-1664.放苹果.(递推)
    hdu-4738.Caocao's Bridges(图中权值最小的桥)
  • 原文地址:https://www.cnblogs.com/aa1314/p/8178738.html
Copyright © 2020-2023  润新知