純js實作瀑布流展現照片(自動適應視窗大小)_javascript技巧-js教程-PHP中文網

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

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

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

複製代碼 程式碼如下:

img { border:1px dashed #000 display:>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); }

window .onload=display; for (var i = 0; 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 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 w = 300; var jg = 20 varimgs = document.getElementsByTagName("img"); for (var i = 0; i var flag = i; h = row / imgs[i].width * imgs[i].height; while (h > H && i i; h = row / (row / h (imgs[i].width jg ) / imgs[i].height); } w = 0; for (var j = flag; 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 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);