当前位置:Gxlcms > JavaScript > 纯js实现瀑布流展现照片(自动适应窗口大小)_javascript技巧

纯js实现瀑布流展现照片(自动适应窗口大小)_javascript技巧

时间:2021-07-01 10:21:17 帮助过:3人阅读

用瀑布流来展现照片再好不过了,下面是瀑布流(每一行的长度等于浏览器窗口的长度)的一种实现方式,也可以用css3实现,很简单,谷歌一下你就知道。

我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了。

然后进入下一个循环插入下一行。公式很简单,假设这一行当前的高度为h,则插入一张高和宽为(x,y)的图片时,满足下列关系:
h' * (w / h + y / x) = w
w是浏览器窗口的宽度,
则 h' = w / (w / h + y / x);
代码如下: