码迷,mamicode.com
首页 > Web开发 > 详细

Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO

时间:2014-06-27 00:27:44      阅读:528      评论:0      收藏:0      [点我收藏+]

标签:des   style   class   blog   code   java   

要求

    • 必备知识

      本文要求基本了解 Html/CSS,  JavaScript/JQuery。

    • 开发环境

      Dreamweaver CS6 / Chrome浏览器

    • 演示地址

      演示地址 资料下载

 

 

测试预览截图(抬抬你的鼠标就可以看到演示地址哦):

bubuko.com,布布扣

程序核心代码看这里:

$(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/

bubuko.com,布布扣

 

官方在线演示地址:http://www.wookmark.com/

bubuko.com,布布扣

 

 

关于动态的上传图片将到后续的文章中介绍,有兴趣的博友可以多多关注哦!!

“呵呵”结束了,请原谅本童鞋目前”脑残又缺乏”的语言组织能力,欢迎大家来拍砖来劈斧,由于本人水平有限,文章在表述和代码方面如有不妥之处,欢迎批评指正。

 

如以上文章或链接对你有帮助的话,别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦,让更多的人阅读这篇文章。

 

作者:Li-Cheng
由于本人水平有限,文章在表述和代码方面如有不妥之处,欢迎批评指正。留下你的脚印,欢迎评论哦。你也可以关注我,一起学习哦!

Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO,布布扣,bubuko.com

Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO

标签:des   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/Li-Cheng/p/3807592.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!