首頁 > 開發者 > JavaScript
http://www.hemin.cn/test/
現在圖片網與商城流行一種叫“瀑布流”的布局，我們公司也不小心得了“流行性感冒”，要搞這個。於是我就寫了一個，現在再用我的架構mass重寫一下，發布出來，順便宣傳一下我的架構。
瀑布流其實沒什麼東西，就是列布局與無限拖的結合。由於要支援IE6就沒有CSS3，直接對列進行絕對位置。列就是一個DIV。然後就是列中每個板塊的添加問題，我管它為磚頭。每添加一塊磚頭前，比較一下哪列最短，就往哪裡塞。最後就是無限拖，太easy了。加之，我的架構對樣式，事件等設定非常簡單，比jQuery更方便。
下面就是源碼，用到了並行載入技術，預設時載入了random,ready,css,event這幾個模組，它們就會自行載入其相依模組了。
require("ready,random,css,event",function($, random){ //容器的CSS運算式，列數，每列的寬度 var Waterfall = function(expr, col, colWidth){ //構建整體輪廓 var container = this.container = $(expr); var pw = container.width();//容器的寬 var gw = (pw - col * colWidth)/(col-1);//列間距離 this.colWidth = colWidth; this.cols = []; for(var i = 0; i < col ; i++){//隨機產生列 this.cols[i] = $("<div class='waterfall' />").css({ position: "absolute", top: 0, left: (colWidth + gw) * i, width: colWidth, backgroundColor: random.hex() }).appendTo(container); } } Waterfall.prototype = { //添加板塊 addBlocks : function(){ for(var i = 0; i < 40; i++){//隨機產生40個板磚 $("<div class='waterfall_block' />").css({ margin: 5, width: this.colWidth - 10 , height: random.num(80, 300), backgroundColor: random.hex() }).appendTo( this.whichCol() ); } }, //計算出最短的欄柵 whichCol:function(el, ret, h){ for(var i = 0, shortest = 0; el = this.cols[i]; i++){ h = el.height(); if(i == 0){ shortest = h; ret = el; } if(h < shortest ){ shortest = h; ret = el; } } return ret; } }; var waterfall = new Waterfall("body",4,300) waterfall.addBlocks(); $(window).scroll(function(){ var clientHeight = $(window).height(), scrollTop = $(window).scrollTop(), scrollHeight = $(document).height(); if(clientHeight + scrollTop >= scrollHeight ){ waterfall.addBlocks(); } }) })
源碼放於github中。
IE下如果報錯，請它重新整理頁面
<br /><!doctype html><br /><html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><br /> <title>瀑布流</title><br /> <script src="http://files.cnblogs.com/rubylouvre/mass_merge20121214.js"></script><br /> <script><br /> window.onerror = function(){<br /> location.reload();//如果報錯，請它自動重新整理。<br /> }<br /> window.onload = function(){<br /> require("random,css,event",function(random, $){<br /> //容器的CSS運算式，列數，每列的寬度<br /> var Waterfall = function(expr, col, colWidth){<br /> //構建整體輪廓<br /> var container = this.container = $(expr);<br /> var pw = container.width();//容器的寬<br /> var gw = (pw - col * colWidth)/(col-1);//列間距離<br /> this.colWidth = colWidth;<br /> this.cols = [];<br /> for(var i = 0; i < col ; i++){//隨機產生列<br /> this.cols[i] = $("<div class='waterfall' />").css({<br /> position: "absolute",<br /> top: 0,<br /> left: (colWidth + gw) * i,<br /> width: colWidth,<br /> backgroundColor: random.hex()<br /> }).appendTo(container);<br /> }<br /> }<br /> Waterfall.prototype = {<br /> //添加板塊<br /> addBlocks : function(){<br /> for(var i = 0; i < 40; i++){//隨機產生40個板磚<br /> $("<div class='waterfall_block' />").css({<br /> margin: 5,<br /> width: this.colWidth - 10 ,<br /> height: random.num(80, 300),<br /> backgroundColor: random.hex()<br /> }).appendTo( this.whichCol() );<br /> }<br /> },<br /> //計算出最短的欄柵<br /> whichCol:function(el, ret, h){<br /> for(var i = 0, shortest = 0; el = this.cols[i]; i++){<br /> h = el.height();<br /> if(i == 0){<br /> shortest = h;<br /> ret = el;<br /> }<br /> if(h < shortest ){<br /> shortest = h;<br /> ret = el;<br /> }<br /> }<br /> return ret;<br /> }<br /> };</p><p> var waterfall = new Waterfall("body",4,300)<br /> waterfall.addBlocks();<br /> $(window).scroll(function(){<br /> var clientHeight = $(window).height(),<br /> scrollTop = $(window).scrollTop(),<br /> scrollHeight = $(document).height();<br /> if(clientHeight + scrollTop >= scrollHeight ){<br /> waterfall.addBlocks();<br /> }<br /> })<br /> })<br />}<br /> </script><br /> </head><br /> <body><br /> <p><br /> 瀑布流 by 司徒正美<br /> </p><br /> </body><br /></html></p><p>
運行代碼
最後附上微博上對它的評論：Pinterest創造的瀑布流樣式，有幾個預設前提：1、圖片極重要，文字不重要；2、使用者瀏覽無明確目的，對複雜的索引無依賴性；3、圖片整體美觀度較高。因此恰恰適合Pinterest這樣的“好圖挖掘與收藏網站”。最近幾個月國內跟風瀑布流，也太盲目了些。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
