首頁  >  文章  >  web前端  >  純js實作瀑布流展現照片(自動適應視窗大小)_javascript技巧

純js實作瀑布流展現照片(自動適應視窗大小)_javascript技巧

WBOY
WBOY原創
2016-05-16 17:37:541233瀏覽

用瀑布流來展現照片再好不過了,下面是瀑布流(每一行的長度等於瀏覽器窗口的長度)的一種實現方式,也可以用css3實現,很簡單,谷歌一下你就知道。

我的思路大概是一張一張的圖片插入,當這一行的圖片保持長寬比例不變並且高度低於250時就完成一個了循環,即這一行插入進去了。

然後進入下一個迴圈插入下一行。公式很簡單,假設這一行目前的高度為h,則插入一張高和寬為(x,y)的圖片時,滿足下列關係式:
h' * (w / h y / x) = w
w是瀏覽器窗口的寬度,
則h' = w / (w / h y / x);

複製代碼 程式碼如下:



陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:頁面使用密碼保護程式碼_javascript技巧下一篇:頁面使用密碼保護程式碼_javascript技巧

相關文章

看更多