Wookmark-jQuery-master 瀑布流外掛使用介紹，含個人測試DEMO

Cheng發表於2014-06-25
jQueryAST

要求

    • 必備知識

      本文要求基本瞭解 Html/CSS，  JavaScript/JQuery。

    • 開發環境

      Dreamweaver CS6 / Chrome瀏覽器

    • 演示地址

      演示地址 資料下載

 

 

測試預覽截圖(抬抬你的滑鼠就可以看到演示地址哦):

2014-06-25_080450

程式核心程式碼看這裡:

$(function(){
    
        function show(){    
                var colors=["#BA4A3A","#5BB5D6","#8EA83B","#EE5C92","#8AC9B5","#604127","#E8A03B","#AF032D","#000000","#506575"];
                var tags=["女人","男人","電影","寶兒","安妮海瑟薇","數碼"];
                for(var i in colors){
                    var index = Math.round(Math.random() * 59);
                    var img="../Public/Pic/test/"+index+".jpg";
                    var index2=Math.round(Math.random() * (tags.length-1));  //隨機獲取一個標籤
                
                    $('#tiles').append(" <li style='background:"+colors[i]+"' class='clearFix'><div style='background:#FFF'><img src='"+img+"' width='230' /></div><p>是一個熊！！不是一個遊戲機！！</p><span>#"+tags[index2]+"</span></li> ");
                }
        
        }
        
         //初始化二十條資料
         show();
         show();
            
    
    /*瀑布流*/
    $('#tiles').imagesLoaded(function() {
        var handler = null;
        // Prepare layout options.
        var options = {
          autoResize: true, // This will auto-update the layout when the browser window is resized.
          container: $('#main'), // Optional, used for some extra CSS styling
          offset: 15, // Optional, the distance between grid items
          itemWidth: 230, // Optional, the width of a grid item
          direction :'right'
        };
        
        //瀑布流佈局
        function applyLayout() {
          $('#tiles').imagesLoaded(function() {
            // Destroy the old handler        //是否需要銷燬舊的佈局
            if (handler.wookmarkInstance) {
              handler.wookmarkInstance.clear();
            }

            // Create a new layout handler. //重新佈局瀑布流
            handler = $('#tiles li');
            handler.wookmark(options);    //傳入配置引數
          });
        }

          //當滾動條高度大於等於最後一個盒子高度 Ajax請求資料
          //繫結到scroll事件上
         
        function onScroll(event) {
          // Check if we're within 100 pixels of the bottom edge of the broser window.
          var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
          var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - 100);

          if (closeToBottom) {    
            show();
            applyLayout();  //執行佈局
          }
        };

        // Capture scroll event.
        $(window).bind('scroll', onScroll);

        // Call the layout function.
        handler = $('#tiles li');  //獲取盒子
        handler.wookmark(options);    //初始化瀑布流
      });    
      
    
      
    
});

Wookmark-jQuery瀑布流外掛介紹和下載:http://www.wookmark.com/jquery-plugin/

2014-06-25_065331

 

官方線上演示地址:http://www.wookmark.com/

2014-06-25_065747

 

 

關於動態的上傳圖片將到後續的文章中介紹，有興趣的博友可以多多關注哦！！

“呵呵”結束了，請原諒本童鞋目前”腦殘又缺乏”的語言組織能力，歡迎大家來拍磚來劈斧，由於本人水平有限，文章在表述和程式碼方面如有不妥之處，歡迎批評指正。

 

如以上文章或連結對你有幫助的話，別忘了在文章結尾處輕輕點選一下 “還不錯”按鈕或到頁面右下角點選 “贊一個” 按鈕哦。你也可以點選頁面右邊“分享”懸浮按鈕哦，讓更多的人閱讀這篇文章。

 

作者:Li-Cheng
由於本人水平有限，文章在表述和程式碼方面如有不妥之處，歡迎批評指正。留下你的腳印，歡迎評論哦。你也可以關注我，一起學習哦！

相關文章