实现瀑布流的三种方法

部分html代码

<! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title > 瀑布流 </ title > <!-- <link rel="stylesheet" type="text/css" href="css/Pinterest.css"> --> <!-- // <script type="text/javascript" src="js/Pinterest.js"></script> --> <!-- <script type="text/javascript" src="js/jquery.js"></script> // <script type="text/javascript" src="js/Pinterest_jquery.js"></script> --> < link rel ="stylesheet" type ="text/css" href ="css/Pinterest_css3.css" > </ head > < body > < div id ="pic_main" > < div class ="pic_box" > < div class ="pic" > < img src ="Pinterest_img/1.jpg" alt ="图片1" > </ div > </ div > < div class ="pic_box" > < div class ="pic" > < img src ="Pinterest_img/2.jpg" alt ="图片2" > </ div > </ div > </ div > </ body > </ html >

 

 

其CSS代码

#pic_main{position: relative;} .pic_box{padding: 15px 0 0 15px;float: left;} .pic{padding: 10px;border: 1px solid #ccc;border-radius: 5px; box-shadow: 0 0 5px #ccc;} .pic img{width: 165px;height:auto;}

原生JS

window.οnlοad=function(){ waterfall('pic_main','pic_box'); var dataInt = {'data':[{'src':'1.jpg'},{'src':'4.jpg'},{'src':'7.jpg'},{'src':'17.jpg'}]}; window.οnscrοll=function(){ if (checkScrollSlide) { var oparent = document.getElementById('pic_main'); for(var i=0;i < dataInt .data.length;i++){ var oBox =document.createElement('div'); oBox.className ='pic_box'; oparent.appendChild(oBox); var oPic =document.createElement('div'); oPic.className ='pic'; oBox.appendChild(oPic); var oImg =document.createElement('img'); oImg.src ='Pinterest_img/'+dataInt.data[i].src; oPic.appendChild(oImg); } waterfall('pic_main','pic_box'); } } }; function waterfall(parent,box){ // 获取父元素pic_main var oparent = document.getElementById(parent); // 获取picbox数组 var oboxs = getByClass(oparent,box); // 计算每个box的宽度 var oboxw =oboxs[0].offsetWidth; // 计算列数 var cols =Math.floor(document.documentElement.clientWidth/oboxw); // 设置main的宽度 oparent.style.cssText ='width:'+cols*oboxw+'px;margin:50px auto'; // 存放第一列的高度 var harray =[]; for (var i =0; i<oboxs.length;i++){ if(i<cols){ harray.push(oboxs[i].offsetHeight); }else{ var minH = Math.min.apply(null,harray); var index = getMinIndex(harray,minH); oboxs[i].style.position ='absolute'; oboxs[i].style.top =minH+'px'; oboxs[i].style.left =index*oboxw+'px'; harray[index]+ =oboxs[i].offsetHeight; } } } function getByClass(parent,className){ var oelements =parent.getElementsByTagName('*'); var boxArray =new Array(); for (var i =0;i<oelements.length;i++){ if(oelements[i].className ==className){ boxArray.push(oelements[i]); } } return boxArray; } function getMinIndex(array,min){ for(var i =0;i<array.length;i++){ if(min ==array[i]) return i; } } function checkScrollSlide(){ var oparent = document.getElementById('pic_main'); var oboxs = getByClass(oparent,'pic_box'); var lastBoxH =oboxs[length-1].offsetTop+Math.floor(oboxs[length-1].offsetHeight/2); var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; var height = document.body.clientHeight||document.documentElement.clientHeight; return (lastBoxH<scrollTop+height)?true:false; }

 

JQuery

$(function(){ waterFull(); var dataInt = {'data':[{'src':'1.jpg'},{'src':'4.jpg'},{'src':'7.jpg'},{'src':'17.jpg'}]}; $(window).on('scroll',function(){ if(checkScrollSlide){ $.each(dataInt.data,function(key,value){ var oBox = $(' < div > ').addClass('pic_box').appendTo($('#pic_main')); var oPic=$(' < div > ').addClass('pic').appendTo($(oBox)); var oImg=$(' < img > ').attr('src','Pinterest_img/'+$(value).attr('src')) .appendTo($(oPic)); }); waterFull(); } }); }); function waterFull(){ var $boxs=$('#pic_main>div'); var boxW=$boxs.eq(0).outerWidth(); var cols = Math.floor($(window).width()/boxW); $('#pic_main').width(cols*boxW).css('margin','0 auto'); var hArr=[]; $boxs.each(function(index,value){ var h=$boxs.eq(index).outerHeight(); if (index < cols ) { hArr[index] =h; }else{ var minH =Math.min.apply(null,hArr); var minHIndex =$.inArray(minH,hArr); $(value).css({ 'position':'absolute', 'top':minH+'px', 'left':minHIndex*boxW+'px' }); hArr[minHIndex]+ =$boxs.eq(index).outerHeight(); } }); } function checkScrollSlide(){ var $lastBox = $('pic_#main > div').last(); var lasrBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight/2); var scrollTop = $(window).scrollTop(); var documentH = $(window).height(); return (lasrBoxDis < scrollTop +documentH)?true:false; }

CSS3

将之前的css文件换成css3文件

css3形成的瀑布流不能实现延迟加载，还是得靠js实现延迟加载

#pic_main{-webkit-column-width: 202px;-moz-column-width: 202px;-o-column-width: 202px; -ms-column-width: 202px; column-width: 202px;} .pic_box{padding: 15px 0 0 15px;} .pic{padding: 10px;border:1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; width: 165px;} .pic img{width:165px;height: auto;display: block;}

转载于:https://www.cnblogs.com/smallbean/p/4382435.html