簡單瀑布流實現

瀑布流通常2種形式

1.固定n列（固定寬度），列中高度不等，如 花瓣網 　

列數可根據瀏覽器視覺化視窗大小改變（也可固定）

當最低的那列到達可視區的底部，再次載入資料 (當前列的offsetheight+offsettop < scrolltop+clientheight)

>瀑布流

title

>

6<

style

>7*

8#container

9#container img

10#loader

11style

>

1213

<

script

src>

script

>

14<

script

>

15/*

16固定列：浮動布局

17定位

18*/

19$(

function

()

else

if(icells

>6)

45//

alert(icells);

46ocontainer.css(

'width

', icells

*iouterwidth) -10

;47}48

setcell();

4950

for(

vari=0

; i<

icells; i

++)

54//

console.log(icells);

55//

console.log(arrl);

5657

function

getdata()

61ibtn

=false;62

ipage++;

63$.getjson(surl, ,

function

(jdata) );

7576

var_index

=getmin();

77oimg.css();

81arrt[_index]

+=iheight +10

;

//82

8384

85var

objimg

=new

image();

86objimg.onload

=function

() 89

objimg.src

=obj.preview;

9091

settimeout(

function

() ,

1000)94

95ibtn

=true;96

97})

9899

});100

}101

getdata();

102//

arrt = [11,23,5,7];

103//

獲取 每一列最短 高度 的下標

104function

getmin()

113}

114return

_index;

115}

116117

//alert(getmin());

118119

$(window).on(

'scroll',

function

() 126

127})

128129

$(window).on(

'resize',

function

() 135

arrt =;

136arrl =;

137for

(vari=

0; i

<

icells; i

++)

141ocontainer.find(

'img

').each(

function

() );

*/148

$(this

).animate(,

1000

);152

arrt[_index]

+=$(

this

).height() +10

;153

154});

155})

156157

158159

})160

script

>

161head

>

162163

<

body

>

164<

div

id="container"

>

div>

165<

div

id="loader"

>

div>

166body

>

167html

>

可直接複製執行

瀑布流簡單實現

使用scrollview簡單實現瀑布流 實現 waterflowview.h import typedefenumwaterfiowviewmargintype class waterflowviewcell,waterfiowview 資料來源方法 protocol waterflowviewda...

簡單html css實現瀑布流

看網上的大牛的瀑布流實現真的頭都大，嫌麻煩，偶發現css新出的column count和break inside屬性就可以輕易實現，下面是實現過程 container item box v for item,index in list key index container item box v f...

swift簡單瀑布流的實現

1.viewcontroller 設定collectionview布局資訊 import uikit import sdwebimage import mjrefresh class yfwate llviewcontroller uiviewcontroller uicollectionviewd...