js瀑布流,簡單封裝

2021-07-25 11:49:55 字數 1208 閱讀 6525

乙個很簡單的瀑布流載入,當滾動條滾動到底部時自動載入,先**敬上

lang="en">

charset="utf-8">

demotitle>

head>

li .pinterest-wrap

.pinterest-wrap

ul .pinterest-wrap

ulli

style>

class="pinterest-wrap">

div>

src="../jquery-1.12.2.min.js">

script>

(function

($),$.fn.pinterest.defaults,options || {});

for(var i=0;ifunction

creatbox

() rgb = "rgb("+ num() +"," + num() + ","+num()+")";

li.height(height);

li.css("background-color",rgb)

return li;

};function

getdata

() })}};

window.onscroll = function

()// if(!isloading)}}

}$.fn.pinterest.init = function

(),$.fn.pinterest.defaults,options || {});

for(var i=0;i4, //列表ul

pagesize : 10, //分頁

page : 0,

bottomheight : 0

//滾動條距離底部距離

}})(jquery)

$(".pinterest-wrap").pinterest();

script>

body>

html>

ullength 是展示的列表數量

pagesize 是分頁數

bottomheight 是滾動條距離底部距離,有時候我們載入時不需要在最底下才進行載入,預設為0;

這只是乙個很簡單的動態載入,實際工作中需要對creatbox()進行修改,根據業務需求來製作相應的瀑布流。

iOS 瀑布流封裝

功能描述 wslwaterflowlayout 是在繼承於uicollectionviewlayout的基礎上封裝的帶頭腳檢視的瀑布流控制項。目前支援豎向瀑布流 item等寬不等高 支援頭腳檢視 水平瀑布流 item等高不等寬 不支援頭腳檢視 豎向瀑布流 item等高不等寬 支援頭腳檢視 三種樣式的...

iOS 瀑布流封裝

位址如下 功能描述 wslwaterflowlayout 是在繼承於uicollectionviewlayout的基礎上封裝的帶頭腳檢視的瀑布流控制項。目前支援豎向瀑布流 item等寬不等高 支援頭腳檢視 水平瀑布流 item等高不等寬 不支援頭腳檢視 豎向瀑布流 item等高不等寬 支援頭腳檢視 ...

js實現簡單瀑布流效果

1.瀑布流,雖然是一種經典的前端效果,但經常不用都忘了它的寫法。前些天需要時,一直忙著找外掛程式,但外掛程式並不是很友好,免費的達不到效果,花金幣又感覺很不值。有時間還不如自己來,又是自己就隨意寫了乙個,還好能勉強過關。var left top left div div last child off...