仿pinterest實現瀑布流布局效果

在張鑫旭的博客里，有一片文章介紹 瀑布流 實現的文章，（要查看演示，請單擊DEMO）本文是在其基礎上進行的二次開發，使其更具實用性。

 

 

這里，主要涉及數據從數據庫里讀取，單擊圖片可以縮放等。

本文附件附帶的源代碼，有興趣可以下載看看

下載的程序打開pic.aspx頁面顯示圖片列表（您需要手動輸入測試數據）。

 

單擊圖片會出現縮放等，除此外，還可以分頁，（排序），以及設置頁面大小等。

 

 

 下面介紹本程序的大致實現。

 

 

1.建立數據庫

見附件里SQL.txt，為了使得效果更明顯，需要輸入測試數據，越多越好

 

2.返回JSON數據 （ajax_getpics.aspx 頁面）

 

返回數據使用了自定義分頁，這里使用了SQL2005+上的Row_Number()函數。在GetData里，還有3個參數：orderby設置數據排序方式（一般網站的圖片，都會讓用戶按照最新上傳，點擊率，回復率排序），預留這個參數就是為了解決這個問題。

pageIndex是通過傳遞的URL來獲取的，也就是用戶訪問了第幾頁

pageSize設置頁面的大小，在本演示中，設置了200.

        public DataTable GetData()
        {
            string orderBy = "pic_id";
            int pageIndex = int.Parse(Request["pageIndex"]);
            int pageSize = int.Parse(Request["pageSize"]);

            string sql = @"
declare @startRowIndex int 
set @pageIndex=@pageIndex-1 
set @startRowIndex=@pageIndex*@pageSize+1;


WITH PICList AS
( 
  select pic_id,user_id,orginpath,description,thumpath, commpeople,
  click,
  ROW_NUMBER() OVER (ORDER BY pic_id DESC) as RowNum 
   FROM    love_pics where isapproved=1
)
  
 Select * from  PICList WHERE RowNum BETWEEN @startRowIndex AND (@startRowIndex + @pageSize-1)  order by " + orderBy + @" desc " ;





            DataTable ds = new DataTable();
            SqlConnection conn = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["con"].ConnectionString);
            SqlCommand dCmd = new SqlCommand();

            dCmd.Parameters.AddWithValue("@pageIndex", pageIndex);
            dCmd.Parameters.AddWithValue("@pageSize", pageSize);
            dCmd.Parameters.AddWithValue("@orderBy", orderBy);

            dCmd.CommandText = sql;
            dCmd.Connection = conn;
            SqlDataAdapter da = new SqlDataAdapter();
            da.SelectCommand = dCmd;
            da.Fill(ds);
            return ds;
        }

 

 

3.制作瀑布頁面 pic.aspx

在開始前，我們先定義一個頁面大小pageSize和自定義分頁的實現。關於Pagination可以參考源代碼里具體實現。

  public int pageindex = 1;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!string.IsNullOrEmpty(Request.QueryString["currentpage"]))
        {
            pageindex = int.Parse(Request.QueryString["currentpage"]);
        }

        string sql = " Select count(*) from love_pics where isapproved=1 ";
        
        // string i = DBHelper.Instance.ExeScalar(sql).ToString();
        string i = "1000";

        //執行上面SQL語句，即可返回記錄說，這里使用了硬編碼，加上是100頁
       
        //附帶的1=1只是用於演示如何自帶參數
        litPaging2.Text = litPaging1.Text = Pagination(int.Parse(i), 200, pageindex, "pic.aspx?1=1&");

    }

 

 

4.獲取JSON返回的數據，也就是用JQuery的getJSON，沒設么特別的，其中pageindex是我們后台定義的頁碼。 后面自動跟了一個random是因為

js在請求時，即使你刷新頁面，但是如果參數不變那么他自動使用本地緩存，所以加上random使得每次請求參數都是變更的

var pics=new Array()
 var ids=new Array();
 var intros=new Array(); 
 var uids=new Array(); 
var clicks=new Array();
var comms=new Array();
                $.getJSON(
             'ajax_getpics.aspx',
              { pageIndex: <%=pageindex%>, PageSize: "200", random: Math.random() },

         function (data) {
 
             $.each(data, function (i, entry) {
            
               pics[i]=entry['orginpath'];
               ids[i]=entry["pic_id"];
               intros[i]=entry["description"];
               uids[i]=entry["user_id"];
               clicks[i]=entry["click"];
               comms[i]=entry["commpeople"];
               });

      //do detect
             

 

 瀑布頁碼代碼，這個代碼是在頁碼加載完畢后加載的，因為剛才說過需要增加單擊圖片時，彈出預覽大圖的效果，所以這里使用了highslide插件

因此代碼里增加了下圖紅色的標記

 // 頁面加載初始創建
        create: function () {
            this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);

            var start = 0, htmlColumn = '', self = this;
            for (start; start < this.columnNumber; start += 1) {
                htmlColumn = htmlColumn + '<span id="waterFallColumn_' + start + '" class="column" style="width:' + this.columnWidth + 'px;">' +
                function () {
                    var html = '', i = 0;
                    for (i = 0; i < 5; i += 1) {
                        self.indexImage = start + self.columnNumber * i;
                        var index = self.getIndex();
                        html = html + '   <a class="highslide pic_a" onclick="return hs.expand(this)" href='+index+'  ><img src=' + index+' /><strong>'+self.getIntro().substring(0,50)+'</strong>  <br> <span class=pro> '+self.getClick()+' click &nbsp;&nbsp;&nbsp;&nbsp; '+ self.getComm()+' comment </span> </a><div class="highslide-caption">'+self.getIntro()+' <a target=_blank href=userinfo.aspx?id='+self.getUid()+'>查看用戶</a> |  <a  target=_blank href=picdetail.aspx?pid='+self.getId()+'>查看圖片('+self.getClick()+')</a> </div> ';
                    }
                    return html;
                } () +
            '</span> ';
            }
            htmlColumn += '<span id="waterFallDetect" class="column" style="width:' + this.columnWidth + 'px;"></span>';

            this.container.innerHTML = htmlColumn;

            this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
            return this;
        },

 

 

當頁碼滾動時，動態加載圖片

 

 

        // 滾動載入
        append: function (column) {
            this.indexImage += 1;
            var html = '',  index = this.getIndex(),  imgUrl = index;

            // 圖片尺寸
            var aEle = document.createElement("div");
           
            aEle.className = "pic_a";
            aEle.innerHTML = ' <a class="highslide pic_a" onclick="return hs.expand(this)" href='+imgUrl+'><img src=' + imgUrl + ' /><strong>'+this.getIntro()+'</strong></a>';
            column.appendChild(aEle);
             
            if (this.indexImage >= 200) {
                  this.loadFinish = true;
            }

            return this;
        },

 

這樣，一個比較完成的例子就完成了。 下載源代碼