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

2021-09-25 18:01:11 字數 2572 閱讀 9125

由於只是做樣式我就沒有使用很多

由於我的大小 太不一,直接就使用了行內樣式來修改

特效分析

找到第一行中高度最小的以後

把第二行的第一張接在剛才最小的下面

由於設定了定位

所以只需要設定後面的top值和left值

最後及時更新最小的長度

不然沒啥用

本來還要設定滾動以後,繼續載入的特效,但是我還沒寫。之後有時間再寫吧

window.

onload

=function()

};function

waterfull

(parent,child)

else}}

function

getminindex

(arr,val)}}

function

$(id)

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

img main 大盒子box是滿的,用padding做間距 box box img 小盒子pic也是滿的,依舊用padding做間距 pic function w scroll function else if document.compatmode css1compat else window ...

瀑布布局流 原生js

首先html和css 然後單單左浮動是不會 插空 插入的,這裡就是我們的重點啦。首先 都是要絕對定位的。確定好乙個頁面有多少列,每插入一張就計算每一列的高度,取最短的那列插入,計算該插入的top和left再賦值,絕對定位定在那裡,就ok啦 function wate ll parent,pin el...

js瀑布流,簡單封裝

乙個很簡單的瀑布流載入,當滾動條滾動到底部時自動載入,先 敬上 lang en charset utf 8 demotitle head li pinterest wrap pinterest wrap ul pinterest wrap ulli style class pinterest wra...