?

代碼?

function putImg(data){let element=[];data.forEach(item=>{let waterItem=create("div","waterItem");let images=create("img");images.src=item.url;let waterText=create("div","waterText");waterText.textContent=item.title;waterItem.append(images,waterText);element.push(waterItem);$(".waterfall").append(waterItem);})return element; }let temp=putImg(data); let waterfallWidth=$(".waterfall").offsetWidth; let waterItemWidth=$(".waterItem").offsetWidth; let cols=parseInt(waterfallWidth/waterItemWidth); let height=new Array(cols).fill(0); let width=new Array(cols).fill(0); let marginBottom=20; window.onload=function(){for(let i=0;i<temp.length;i++){if (i<cols) {height[i]=temp[i].offsetHeight;width[i]=temp[i].offsetLeft;}else{temp[i].style.position="absolute";let minHeight=Math.min(...height);let minIndex=height.indexOf(minHeight);temp[i].style.top=`${minHeight+marginBottom}px`;temp[i].style.left=`${width[minIndex]}px`;height[minIndex]+=temp[i].offsetHeight+marginBottom;}} }window.addEventListener("scroll",function(){let scroll=document.documentElement.scrollTop;let winHeigth=this.innerHeight;let min=Math.min(...height);if (scroll+winHeigth>=min) {let temp=putImg(data);for(let i=0;i<temp.length;i++){temp[i].style.position="absolute";let minHeight=Math.min(...height);let minIndex=height.indexOf(minHeight);0temp[i].style.top=`${minHeight+marginBottom}px`;temp[i].style.left=`${width[minIndex]}px`;height[minIndex]+=temp[i].offsetHeight+marginBottom;}} })

?

數據?

let data=[{"url":"images/01.jpg","title":"日照香爐生紫煙，遙看瀑布掛前川。飛流直下三千尺，疑是銀河落九天。"},{"url":"images/02.jpg","title":"尋尋覓覓，冷冷清清，凄凄慘慘戚戚。乍暖還寒時候，最難將息。三杯兩盞淡酒，怎敵他、晚來風急！"},{"url":"images/03.jpg","title":"好雨知時節，當春乃發生。 隨風潛入夜，潤物細無聲。 野徑云俱黑，江船火獨明。 曉看紅濕處，花重錦官城。"},{"url":"images/04.jpg","title":"床前明月光，疑是地上霜。 舉頭望明月，低頭思故鄉。"},{"url":"images/05.jpg","title":"君不見黃河之水天上來，奔流到海不復回。 君不見高堂明鏡悲白發，朝如青絲暮成雪。 人生得意須盡歡，莫使金樽空對月。 天生我材必有用，千金散盡還復來"},{"url":"images/06.jpg","title":"朝辭白帝彩云間，千里江陵一日還。 兩岸猿聲啼不住，輕舟已過萬重山。"},{"url":"images/07.jpg","title":"春眠不覺曉，處處聞啼鳥。 夜來風雨聲，花落知多少。"},{"url":"images/08.jpg","title":"白日何短短，百年苦易滿。 蒼穹浩茫茫，萬劫太極長。 麻姑垂兩鬢，一半已成霜。"},{"url":"images/09.jpg","title":"昨夜雨疏風驟，濃睡不消殘酒。試問卷簾人，卻道海棠依舊。知否，知否，應是綠肥紅瘦。"},{"url":"images/10.jpg","title":"國破山河在，城春草木深。 感時花濺淚，恨別鳥驚心。 烽火連三月，家書抵萬金。 白頭搔更短，渾欲不勝簪。"},{"url":"images/11.jpg","title":"死去元知萬事空，但悲不見九州同。 王師北定中原日，家祭無忘告乃翁。。"},{"url":"images/12.jpg","title":"遠上寒山石徑斜，白云深處有人家。 停車坐愛楓林晚，霜葉紅于二月花。"},{"url":"images/13.jpg","title":"美人卷珠簾，深坐顰蛾眉。 但見淚痕濕，不知心恨誰。"},{"url":"images/14.jpg","title":"茅檐低小，溪上青青草。醉里吳音相媚好，白發誰家翁媼。 大兒鋤豆溪東，中兒正織雞籠。最喜小兒亡賴，溪頭臥剝蓮蓬。"},{"url":"images/15.jpg","title":"四五十年，風雨如晦不重見。 過眼飛云，橫豎茫茫一線天。 休要夸口，豪杰劫后是民愿。 海天環顧，一路走來一路煙。"},{"url":"images/16.jpg","title":"人民勝利今何在？滿路新貴滿目衰! 核彈高置昆侖巔，摧盡腐朽方釋懷。"},{"url":"images/17.jpg","title":"江南好，風景舊曾諳。日出江花紅勝火，春來江水綠如藍。能不憶江南？"},{"url":"images/18.jpg","title":"眾鳥高飛盡，孤云獨去閑。 相看兩不厭，只有敬亭山。"},{"url":"images/19.jpg","title":"碧玉妝成一樹高，萬條垂下綠絲絳。 不知細葉誰裁出，二月春風似剪刀。"},{"url":"images/20.jpg","title":"鸚鵡來過吳江水，江上洲傳鸚鵡名。 鸚鵡西飛隴山去，芳洲之樹何青青。 煙開蘭葉香風暖，岸夾桃花錦浪生。 遷客此時徒極目，長洲孤月向誰明。"},{"url":"images/21.jpg","title":"慈母手中線，游子身上衣。 臨行密密縫，意恐遲遲歸。 誰言寸草心，報得三春暉。"},{"url":"images/22.jpg","title":"生當作人杰，死亦為鬼雄。至今思項羽，不肯過江東。"},{"url":"images/23.jpg","title":"漢皇重色思傾國，御宇多年求不得。 楊家有女初長成，養在深閨人未識。 天生麗質難自棄，一朝選在君王側。 回眸一笑百媚生，六宮粉黛無顏色。 春寒賜浴華清池，溫"},{"url":"images/24.jpg","title":"泉眼無聲惜細流，樹陰照水愛晴柔。 小荷才露尖尖角，早有蜻蜓立上頭。"},{"url":"images/25.jpg","title":"幽閨情脈脈，漏長宵寂寂。草螢飛夜戶，絲蟲繞秋壁。薄笑夫為欣，微歡還成戚。金簪鬢下垂，玉箸衣前滴"},{"url":"images/26.jpg","title":"今朝春比昨朝春，北阮番成南阮貧。 借問牧童應沒酒，試嘗梅子又生仁。 六如偈送錢塘妾，八斗才逢洛水神。 多少好花空落盡，不曾遇著賞花人。"},{"url":"images/27.jpg","title":"富兒重安居，貧士輕遠游。衣食茍不充，奔迸寧得休？前年游稷下，將母住齊州。母卒始歸葬，暫一省林邱。本無置錐地，故鄉安可留？今當涉河洛，但為妻子謀。出門瞰春光"}, ]

總結

以上是生活随笔為你收集整理的瀑布流布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。