Posted in Javascript onApril 08, 2013
用瀑布流来展现照片再好不过了,下面是瀑布流(每一行的长度等于浏览器窗口的长度)的一种实现方式,也可以用css3实现,很简单,谷歌一下你就知道。
我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了。
然后进入下一个循环插入下一行。公式很简单,假设这一行当前的高度为h,则插入一张高和宽为(x,y)的图片时,满足下列关系:
h' * (w / h + y / x) = w
w是浏览器窗口的宽度,
则 h' = w / (w / h + y / x);
<html> <head> <style> img { border:1px dashed #000; display: inline-block; z-index:-1; -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); //-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); //-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); //-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); //transform: rotate(2deg) translate(-14px,20px) skew(-20deg); } </style> <script src="js/jquery.min.js"></script> </head> <body onload="display()"> <!--div id="title" style="position:absolute;width:300px;height:200px;background:red;"></div--> <script type="text/javascript"> window.onload=display; for (var i = 0; i < 34; ++ i) { var div = document.createElement('div'); div.setAttribute("id", "div_" + i.toString()); div.setAttribute("style", "position:absolute"); document.body.appendChild(div); } for (var i = 0; i < 34; ++ i) { var img = document.createElement('img'); img.setAttribute('src', '/images/' + 'psb_' + (i + 1).toString() + '.jpg'); document.getElementById("div_" + i.toString()).appendChild(img); } function display() { var col = 0; var row = document.body.clientWidth - 50; var H = 250; var h = 0; var w = 300; var jg = 20; var imgs = document.getElementsByTagName("img"); for (var i = 0; i < imgs.length; ++ i) { var flag = i; h = row / imgs[i].width * imgs[i].height; while (h > H && i < imgs.length - 1) { ++ i; h = row / (row / h + (imgs[i].width + jg) / imgs[i].height); } w = 0; for (var j = flag; j <= i; ++ j) { imgs[j].parentNode.style.top = (col + jg).toString() + "px"; imgs[j].parentNode.style.left = (w + jg).toString() + "px"; imgs[j].style.height = h.toString() + "px"; w = w + h / imgs[j].height * imgs[j].width + jg; } col += h + jg; } /* var imgs = document.getElementsByTagName("img"); for (var i = 0; i < imgs.length; ++ i) { if (row + imgs[i].width > document.body.clientWidth + 100) { ++ col; row = 0; } imgs[i].parentNode.style.top = (col * 250).toString() + "px"; imgs[i].parentNode.style.left = row.toString() + "px"; row += imgs[i].width + 10; } */ } window.onresize=display; //$(window).resize(display); </script> </body> </html>
纯js实现瀑布流展现照片(自动适应窗口大小)
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@