純js實作瀑布流展現照片(自動適應視窗大小)_javascript技巧
- WBOY原創
- 2016-05-16 17:37:541270瀏覽
用瀑布流來展現照片再好不過了，下面是瀑布流（每一行的長度等於瀏覽器窗口的長度）的一種實現方式，也可以用css3實現，很簡單，谷歌一下你就知道。
我的思路大概是一張一張的圖片插入，當這一行的圖片保持長寬比例不變並且高度低於250時就完成一個了循環，即這一行插入進去了。
然後進入下一個迴圈插入下一行。公式很簡單，假設這一行目前的高度為h，則插入一張高和寬為（x，y）的圖片時，滿足下列關係式：
h' * (w / h y / x) = w
w是瀏覽器窗口的寬度，
則h' = w / (w / h y / x);
複製代碼 程式碼如下:
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn