<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script><title>帶有分散效果的瀑布流</title><style type="text/css">? ? *{padding: 0;margin:0;}? ? #main{ -webkit-column-Width:237px; -moz-column-Width:237px; -o-column-Width:237px; -ms-column-Width:237px; -webkit-column-gap:5px; ?-moz-column-gap:5px; ?margin:0 auto; ?border:2px solid #3F3;? ? }? ? .box{? ? ? ? padding: 15px 0 0 15px;? ? ? ? float:left; width:222px;? ? }? ? .pic{? ? ? ? padding: 10px;? ? ? ? border:1px solid #ccc;? ? ? ? box-shadow: 0 0 6px #ccc;? ? ? ? border-radius: 5px;? ? } ? ? .pic img{? ? ? ? width:200px;? ? ? ? height:auto; display:block;? ? }</style><script>$( window ).on( "load", function(){? ?// 調(diào)用waterfall函數(shù)? ?var dataimg={"data":[{"src":"http://pic17.nipic.com/20111025/6957597_163322054332_2.jpg"}, ? ? ? ? ? ? ? ? ? ? {"src":"http://pica.nipic.com/2007-12-03/2007123141415713_2.jpg"}, {"src":"http://pic4.nipic.com/20090823/3193830_121855091_2.jpg"}, {"src":"http://pic.nipic.com/2008-01-16/200811683222770_2.jpg"}, {"src":"http://pic9.nipic.com/20100904/5041436_154436449375_2.jpg"}, {"src":"http://pic1.nipic.com/2008-12-09/200812912540990_2.jpg"}, {"src":"http://pic19.nipic.com/20120315/4758005_091854125000_2.jpg"}, {"src":"http://pic1a.nipic.com/2008-10-27/200810279545868_2.jpg"}, {"src":"http://pic3.nipic.com/20090525/2416945_231841034_2.jpg"}, {"src":"http://pica.nipic.com/2007-12-03/2007123152823533_2.jpg"} ]} $(window).on('scroll',function(){ if(scrollcheck()){ $.each(dataimg.data,function(index,value){ var obox=$('<div>').addClass('box').appendTo($("#main")); var opic=$("<div>").addClass("pic").appendTo($(obox)); $("<img>").attr("src",dataimg.data[index].src).appendTo(opic) }) }? })? ??});function scrollcheck(){var $lastbox=$('.box').last();var boxtop=$lastbox.offset().top;var boxH=Math.floor($lastbox.outerHeight()/2);var H=boxtop+boxH;var scrolltop=$(window).scrollTop();var clientH=$(window).height();if(H<scrolltop+clientH){ return true }else{ return false } }</script></head>?<body>? ? ?<div id="main">? <div class="box">? <div class="pic">? <img src=http://image.tianjimedia.com/uploadImages/2011/252/8GO666XNQM49.jpg />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://hiphotos.baidu.com/1985129/pic/item/d05c8ed3cc27b16e970a16b1.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://pic2.nipic.com/20090415/2137336_074730000_2.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://pic1.nipic.com/20090320/657979_215251058_2.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://pic32.nipic.com/20130715/13232606_164243348120_2.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://pic.duowan.com/tx2/1205/201189276629/201189504837.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://imgsrc.baidu.com/forum/pic/item/c69ae2003af33a87ecb1c796c65c10385143b585.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://s6.sinaimg.cn/middle/6753066ftc67bdde1ca25&690" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://ww1.sinaimg.cn/mw600/8758e340jw1e80ptpik3sj21hc0u0gxb.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://s7.sinaimg.cn/middle/73c68f59ha24176b9fff6&690" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://pub.chinaunix.net/uploadfile/201204/20120422080605108.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://img1.ph.126.net/f0PNgS5xHvIoP87RDZIh3w==/6597568944937413022.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://images.ali213.net/picfile/pic/2012-12-25/927_q28.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://img2.3lian.com/2014/f7/5/22.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://cdnq.duitang.com/uploads/item/201504/27/20150427155902_8ZFeT.jpeg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://img05.tooopen.com/images/20150314/tooopen_sy_82508981539.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://imgsrc.baidu.com/forum/pic/item/0ea6ba6eddc451da3189c429b6fd5266d116326c.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://imgsrc.baidu.com/forum/pic/item/08afc680b1b6534c495403a9.jpg" />? </div>? </div> </div>?</body></html>
用CSS3設(shè)置瀑布流，瀏覽器頂部不能對(duì)齊，這種bug怎么解決，各位大牛，謝謝了
大黑虎
2016-01-17 18:05:41
