課程
/前端開發(fā)
/JavaScript
/瀑布流布局
求編程挑戰(zhàn)的demo ?動畫效果加看起來很給力啊 大俠大俠來個demo吧
2015-07-21
源自：瀑布流布局 5-2
正在回答
<!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{position:relative;
}
? .box{
? ? ? ?padding:15px 0 0 15px;
? ?position:absolute}
? .pic{padding:10px;
?border:1px splid #999;
?border-radius:5px;
?box-shadow:0 0 5px #999;
? .pic img{width:210px;
?height:auto;
?
?}
</style>
<script type="text/javascript">
$( window ).on( "load", function(){
waterfall();
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)
})
}?
waterfallload();
var myarr=[];
function waterfall(){
?// 計算及定位數(shù)據(jù)塊顯示分散效果
? var $boxs=$("#main").find(".box");
? var boxW=$boxs.eq(0).outerWidth();
? var clientW=$(window).width();
? var clos=Math.floor(clientW/boxW);
? var clientH=$(window).height()/2;
?$boxs.each(function(index,value){
if(index<clos){
? ? ?myarr.push(0);
var random2=Math.floor(Math.random()*200);
var xx=myrandom()
$boxs.eq(index).css({
top:clientH/2+'px',
left:'50%',
'margin-top':random2,
'margin-left':-(($boxs.width()/2)+(xx*random2))
animatefall($boxs,0,boxW)
?function animatefall(abc,n,www){
var minH=Math.min.apply(null,myarr);
? var inde=$.inArray(minH,myarr);
??
? abc.eq(n).animate({
left:inde*www,
margin:0,
top:myarr[inde]
},200,function(){
myarr[inde]+=abc.eq(n).outerHeight();
n++;
animatefall(abc,n,www)
function myrandom(){
var x=Math.floor(Math.random()*10);
if(x<5){
x=-1;
? }else{
?x=1;
? }
? return x
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
function waterfallload(){
?var $boxs=$(".box");
?var boxW=$boxs.eq(0).outerWidth();
?console.log(boxW)
?var clientW=$(window).width();
?var cols=Math.floor(clientW/boxW);
?$("#main").width(boxW*cols).css("margin","0 auto");
?var arr=new Array();
? ? ?if(index<cols){
? ? ? ? ?arr[index]=$boxs.eq(index).outerHeight();
? ? ?}else{
? ? ? ? ?var minH=Math.min.apply(null,arr);
? ? ? ? ?var minHIndex=$.inArray(minH,arr);
? ? ? ? ?var boxleft=minHIndex*boxW;
var boxtop=arr[minHIndex];
$(value).css({'position':'absolute','left':boxleft,'top':boxtop})
? ? ? ? ?arr[minHIndex]+=$boxs.eq(index).outerHeight();
? ? ?}
?})
</script>
</head>
?<body>
? ? ?<div id="main">
? <div class="box">
? <div class="pic">
? <img src=http://image.tianjimedia.com/uploadImages/2011/252/8GO666XNQM49.jpg />
? </div>
? <img src="http://hiphotos.baidu.com/1985129/pic/item/d05c8ed3cc27b16e970a16b1.jpg" />
? <img src="http://pic2.nipic.com/20090415/2137336_074730000_2.jpg" />
? <img src="http://pic1.nipic.com/20090320/657979_215251058_2.jpg" />
? <img src="http://pic32.nipic.com/20130715/13232606_164243348120_2.jpg" />
? <img src="http://pic.duowan.com/tx2/1205/201189276629/201189504837.jpg" />
? <img src="http://imgsrc.baidu.com/forum/pic/item/c69ae2003af33a87ecb1c796c65c10385143b585.jpg" />
? <img src="http://s6.sinaimg.cn/middle/6753066ftc67bdde1ca25&690" />
? <img src="http://ww1.sinaimg.cn/mw600/8758e340jw1e80ptpik3sj21hc0u0gxb.jpg" />
? <img src="http://s7.sinaimg.cn/middle/73c68f59ha24176b9fff6&690" />
? <img src="http://pub.chinaunix.net/uploadfile/201204/20120422080605108.jpg" />
? ? ? ? <div class="box">
? <img src="http://img1.ph.126.net/f0PNgS5xHvIoP87RDZIh3w==/6597568944937413022.jpg" />
? <img src="http://images.ali213.net/picfile/pic/2012-12-25/927_q28.jpg" />
? <img src="http://img2.3lian.com/2014/f7/5/22.jpg" />
? <img src="http://cdnq.duitang.com/uploads/item/201504/27/20150427155902_8ZFeT.jpeg" />
? <img src="http://img05.tooopen.com/images/20150314/tooopen_sy_82508981539.jpg" />
? <img src="http://imgsrc.baidu.com/forum/pic/item/0ea6ba6eddc451da3189c429b6fd5266d116326c.jpg" />
? <img src="http://imgsrc.baidu.com/forum/pic/item/08afc680b1b6534c495403a9.jpg" />
</div>
?</body>
</html>
慕函數(shù)6472736
舉報
瀑布流布局是網(wǎng)站比較流行的一種布局方式，教你實現(xiàn)三大方式
1 回答為什么我按老師說的做沒做出來效果，求大神指教
1 回答屏幕大小不同帶來的問題啊
2 回答大家?guī)臀铱纯村e哪里了啊，布局效果就不行TT?。?/p>
1 回答沒有實現(xiàn)排序效果，求大神支招
2 回答哪位大神幫忙看下為什么圖片出不來，滾動加載不了奇怪？？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-01-18
<!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{position:relative;
}
? .box{
? ? ? ?padding:15px 0 0 15px;
? ?position:absolute}
? .pic{padding:10px;
?border:1px splid #999;
?border-radius:5px;
?box-shadow:0 0 5px #999;
}
? .pic img{width:210px;
?height:auto;
?
?}
</style>
<script type="text/javascript">
$( window ).on( "load", function(){
waterfall();
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)
})
}?
waterfallload();
})
})
var myarr=[];
function waterfall(){
?// 計算及定位數(shù)據(jù)塊顯示分散效果
? var $boxs=$("#main").find(".box");
? var boxW=$boxs.eq(0).outerWidth();
? var clientW=$(window).width();
? var clos=Math.floor(clientW/boxW);
? var clientH=$(window).height()/2;
?$boxs.each(function(index,value){
if(index<clos){
? ? ?myarr.push(0);
}
var random2=Math.floor(Math.random()*200);
var xx=myrandom()
$boxs.eq(index).css({
top:clientH/2+'px',
left:'50%',
'margin-top':random2,
'margin-left':-(($boxs.width()/2)+(xx*random2))
})
})
animatefall($boxs,0,boxW)
}
?function animatefall(abc,n,www){
var minH=Math.min.apply(null,myarr);
? var inde=$.inArray(minH,myarr);
??
? abc.eq(n).animate({
left:inde*www,
margin:0,
top:myarr[inde]
},200,function(){
myarr[inde]+=abc.eq(n).outerHeight();
n++;
animatefall(abc,n,www)
})
}
function myrandom(){
var x=Math.floor(Math.random()*10);
if(x<5){
x=-1;
? }else{
?
?x=1;
? }
? return x
}
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
}
}
function waterfallload(){
?// 計算及定位數(shù)據(jù)塊顯示分散效果
?var $boxs=$(".box");
?var boxW=$boxs.eq(0).outerWidth();
?console.log(boxW)
?var clientW=$(window).width();
??
?var cols=Math.floor(clientW/boxW);
?$("#main").width(boxW*cols).css("margin","0 auto");
?var arr=new Array();
?$boxs.each(function(index,value){
? ? ?if(index<cols){
? ? ? ? ?arr[index]=$boxs.eq(index).outerHeight();
? ? ?}else{
? ? ? ? ?var minH=Math.min.apply(null,arr);
? ? ? ? ?var minHIndex=$.inArray(minH,arr);
? ? ? ? ?var boxleft=minHIndex*boxW;
var boxtop=arr[minHIndex];
$(value).css({'position':'absolute','left':boxleft,'top':boxtop})
? ? ? ? ?arr[minHIndex]+=$boxs.eq(index).outerHeight();
? ? ?}
?})
}
</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>