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