js學習筆記(瀑布流特效下)

2021-10-05 04:04:09 字數 1132 閱讀 8623

*

img#main

/*大盒子box是滿的,用padding做間距*/

.box

.box img

/*小盒子pic也是滿的,依舊用padding做間距*/

.pic

(

function

(w),

scroll:

function()

;}else

if(document.compatmode ===

"css1compat");

}else;}

}};}

)(window)

;//將tool綁到window裡

window.

addeventlistener

('load'

,function

(ev),,

,,,,

,];//遍歷資料,建立盒子

for(

var i =

0; i < dataa.length; i++

)//重新瀑布流布局

waterfull

('main'

,'box');

}},200)}

);//頁面尺寸發生改變重新布局

/* 因為尺寸改變的非常頻繁,但是又不需要時時刻刻都去布局,只要到指定位置布局就行

所以要做個節流

*/var timer=

null

; window.

addeventlistener

('resize'

,function()

,200);

})})

;/**

* 實現瀑布流布局

* @param parent

* @param child

*/function

waterfull

(parent, child)

else}}

function

getindex

(arr, val)}}

function

check()

JS瀑布流特效(還未完全完成)

由於只是做樣式我就沒有使用很多 由於我的大小 太不一,直接就使用了行內樣式來修改 特效分析 找到第一行中高度最小的以後 把第二行的第一張接在剛才最小的下面 由於設定了定位 所以只需要設定後面的top值和left值 最後及時更新最小的長度 不然沒啥用 本來還要設定滾動以後,繼續載入的特效,但是我還沒寫...

iOS學習筆記 瀑布流封裝

最近學習了瀑布流布局,是用collectionview實現的。首先說說設計思路,用collectionview做出來的瀑布流是固定行數或者列數的。以現在主流固定列數為例,每個item就是固定寬,不固定高,同時每個item之間的間距是固定的,那麼每行的y值計算就需要通過前一行的最短的item來確定。既...

ajax學習筆記之瀑布流

此為列數固定的瀑布流 就是無論放大縮小瀏覽器百分比 列數不變 是比較簡單的版本 學習用 這篇只是適合我自己記憶的筆記 可能不是適合所有人 隨意看看就好 布局很簡單 就是乙個ul下4個li 個數可隨意 主函式部分 請求來的資料data格式是乙個陣列中包含了多個物件 乙個物件既包含了src和寬高和介紹等...