                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /瀑布流布局

求答案源碼。

雖然同學(xué)代碼里有一個(gè)能用的，能達(dá)到類似效果的，可是卻寫的有點(diǎn)不倫不類，看不懂。求標(biāo)準(zhǔn)源代碼。

Bang丶

2015-11-01

源自：瀑布流布局 5-2

關(guān)注問題我要回答

1104

操作

收起

2 回答

慕函數(shù)6472736
2016-01-21

<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/>
<script?type="text/javascript"?src="http://libs.baidu.com/jquery/2.0.0/jquery.js"/></script>
<title>帶有分散效果的瀑布流</title>
<style?type="text/css">
????*{padding:?0;margin:0;}
????#main{
????????position:?relative;
????}
????.pin{
????????padding:?15px?0?0?15px;
????????float:left;
????}
????.box{
????????padding:?10px;
????????border:1px?solid?#ccc;
????????box-shadow:?0?0?6px?#ccc;
????????border-radius:?5px;
????}
????.box?img{
????????width:162px;
????????height:auto;
????}
</style>
<script>

var?dataInt={
?????	'data':[
????????		{'src':'http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg'},
????????		{'src':'http://news.k618.cn/pic/top/201510/W020151031321958043503.jpg'},
????????		{'src':'http://ww1.sinaimg.cn/mw600/ae236388gw1e7cx5xiqufj2099099jsa.jpg'},
????????		{'src':'http://imgsrc.baidu.com/forum/w%3D580/sign=f9922429ba12c8fcb4f3f6c5cc0392b4/2232b31bb051f8190d015543d9b44aed2e73e7b7.jpg'}
	]};

$(?window?).on(?"load",?function(){
????
???//?調(diào)用waterfall函數(shù)
????waterfall();
});
window.onscroll=function(){
???????//?拖動(dòng)滾動(dòng)條時(shí)
???????var?pins?=?$('#main?>?div'),
?????????????main?=?$('#main'),
?????????????pinW?=?pins.eq(0).outerWidth();???
???????//在滾動(dòng)發(fā)生時(shí)清除掉分散布局的樣式，進(jìn)入瀑布流布局
???????clearCss(?pins?);//清除分散布局
???????arrangement(?pinW,?pins?);//瀑布流布局??
???????upData(?pinW,?pins?);//判定是否加載新數(shù)據(jù)
}


function?waterfall(){
?//?計(jì)算及定位數(shù)據(jù)塊顯示分散效果
var?pins?=?$('#main?>?div'),
?????pinW?=?pins.eq(0).outerWidth();???
var?winW?=?$(window).width,
??????winH?=?$(window).height;
//父容器居中布局???????
$('#main').css(?{?'width'?:?pinW*6+'px',?'height'?:?pinW*4+'px',?'top':pinW+'px',?'margin'?:?'0?auto'}?);
//如何實(shí)現(xiàn)分散
??for(?var?i?in?pins?){
?????????pins.eq(i).css({
???????????'position':'absolute',
???????????'top':Math.floor(Math.random()*10)*30-(pins.height()/2)+'px',
???????????'left':Math.floor(?Math.random()*(pinW*5)?)+'px'
????????});
??}????
}

//清除分散布局的CSS
function?clearCss(?arr?)
{
????$('#main').removeAttr('style');
????for(?var?i?in?arr?)
???{?
???????arr.eq(i).removeAttr('style');
???}
}

//瀑布流排列，與分散布局分開寫是為了使邏輯清晰
function?arrangement(?w,?arr?){
????var?cols?=?Math.floor(?$(window).width()?/?w?);
????$('#main').css(?{?'width':cols*w,?'margin':'0?auto'}?);
????var?hArr?=?[];
????arr.each(?function(?index,?value?){
????????if(?index?<?cols?)
????????{
????????????hArr[index]?=?$(value).outerHeight();
????????}else{
????????????var?minH?=?Math.min.apply(?null,?hArr?),
?????????????????minIndex?=?$.inArray(?minH,?hArr?);
????????????$(?value?).css({
?????????????????'position':'absolute',
?????????????????'top':minH+'px',
?????????????????'left':minIndex*w+'px'
?????????????});	
????????????hArr[minIndex]?+=?arr.eq(index).outerHeight();
????????}
??????
????}?);
}

function?checkscrollside(){
??//?檢測是否具備了加載數(shù)據(jù)塊的條件
??var?winH?=?$(window).height(),
???????scroH?=?$(window).scrollTop(),
???????lastBoxTop?=?Math.floor(?$('#main?>?div').last().offset().top?+?$('#main?>?div').last().height()?/?2?);
??return?(?winH?+?scroH?>?lastBoxTop???true?:?false?);
}

//這里是數(shù)據(jù)加載
function?upData(?w,?arr?){
????if(?checkscrollside?)
???{
??????????$.each(?dataInt.data,?function(?key,?value?){
?????????????????var?creatPin?=?$('<div>').addClass('pin').appendTo($('#main')),
??????????????????????creatBox?=?$('<div>').addClass('box').appendTo(?$(creatPin)?);
?????????????????$('<img>').attr(?'src',?value.src?).appendTo(?$(creatBox)?);
???????????});
??????????arrangement(?w,?arr?);
????}
}

</script>
</head>
<body>
<div?id="main">
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://news.k618.cn/pic/top/201510/W020151031321958043503.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://pic47.nipic.com/20140901/12398452_214208031000_2.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://news.k618.cn/pic/top/201510/W020151031321958043503.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://ww2.sinaimg.cn/large/8989048bjw1dutawvaz66j.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://ww1.sinaimg.cn/mw600/ae236388gw1e7cx5xiqufj2099099jsa.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://news.k618.cn/pic/top/201510/W020151031321958043503.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://imgsrc.baidu.com/forum/w%3D580/sign=f9922429ba12c8fcb4f3f6c5cc0392b4/2232b31bb051f8190d015543d9b44aed2e73e7b7.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://www.mengtu.cc/uploads/allimg/140802/1-140P2235644-50.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://news.k618.cn/pic/top/201510/W020151031321958043503.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://imgsrc.baidu.com/forum/w%3D580/sign=f9922429ba12c8fcb4f3f6c5cc0392b4/2232b31bb051f8190d015543d9b44aed2e73e7b7.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://www.mengtu.cc/uploads/allimg/140802/1-140P2235644-50.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://ww2.sinaimg.cn/large/8989048bjw1dutawvaz66j.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://www.mengtu.cc/uploads/allimg/140802/1-140P2235644-50.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
????????</div>
????</div>
????<div?class="pin">
????????<div?class="box">
????????????<img?src="http://ww2.sinaimg.cn/large/8989048bjw1dutawvaz66j.jpg"/>
????????</div>
????</div>
</div>
</body>
</html>

有個(gè)漏洞，就是如果你打開網(wǎng)頁，圖片能夠全部顯示、那么滾動(dòng)加載就會(huì)失效！

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕函數(shù)6472736

我這個(gè)沒有動(dòng)畫效果，不酷

2016-01-21 回復(fù) 有任何疑惑可以回復(fù)我~

野貓1
2016-01-19

$(window).on('load',function(){
????waterfall();
????//后臺(tái)給了我們json數(shù)據(jù)
????var?dataInt?={"data":[{"src":'0.jpg'},{"src":'13.jpg'},{"src":'24.jpg'},{"src":'25.jpg'},{"src":'36.jpg'}]};
????window.onscroll?=?function(){
????$(window).on('scroll',function(){
????????if?(checkScrollSlide)?{
????????????$.each(dataInt.data,function(index,value){
????????????????var?oBox?=?$('<div>').addClass('box').appendTo($("#main"));
????????????????var?oPic?=?$('<div>').addClass('pic').appendTo(oBox);
????????????????$('<img>').attr('src','images/'+?$(value).attr('src')).appendTo(oPic);
????????????????})
????????????waterfall();
????????????}
????????})
????}
})

function?waterfall(){
?????var?$boxs?=?$('#main>div');//大于號(hào)，之匹配一級div子元素；
?????var?w?=?$boxs.eq(0).outerWidth();//獲取每列的寬度
?????var?cols?=?Math.floor($(window).width()/w);
?????$('#main').width(w*cols).css('margin','0?auto');//設(shè)置main的寬度，并居中顯示
?????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);//求出minH在HArry中的索引
?????????????$(value).css({//將value轉(zhuǎn)換成jQuery對象才可以使用jQuery方法；
?????????????????'position':'absolute',
?????????????????'top':minH?+?15,
?????????????????'left':minHIndex*w?,
?????????????})
?????????????hArr[minHIndex]+=$boxs.eq(index).outerHeight()+15;
?????????}
?????})
}

function?checkScrollSlide(){
????var?$lastBox?=?$('#main>div').last();
????var?lastBoxDis?=?$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
????var?scrollTop?=?$(window).scrollTop();
????var?documentH?=?$(window).height();//瀏覽器可是窗口的高度
????return(lastBoxDis<scrollTop+documentH)?true:false;
}

這是jQuery實(shí)現(xiàn)方法視頻里面老師教著寫的，跟老師給的源代碼不一樣，但是在瀏覽器上效果很卡，希望對你有幫助

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答