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

要求

  • 必备知识

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

  • 开发环境

    Dreamweaver CS6 / Chrome浏览器

  • 演示地址

    演示地址资料下载

 

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

程序核心代码看这里:

  1. $(function(){
  2.  
  3. function show(){
  4. var colors=["#BA4A3A","#5BB5D6","#8EA83B","#EE5C92","#8AC9B5","#604127","#E8A03B","#AF032D","#000000","#506575"];
  5. var tags=["女人","男人","电影","宝儿","安妮海瑟薇","数码"];
  6. for(var i in colors){
  7. var index = Math.round(Math.random() * 59);
  8. var img="../Public/Pic/test/"+index+".jpg";
  9. var index2=Math.round(Math.random() * (tags.length-1)); //随机获取一个标签
  10.  
  11. $('#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> ");
  12. }
  13.  
  14. }
  15.  
  16. //初始化二十条数据
  17. show();
  18. show();
  19.  
  20. /*瀑布流*/
  21. $('#tiles').imagesLoaded(function() {
  22. var handler = null;
  23. // Prepare layout options.
  24. var options = {
  25. autoResize: true, // This will auto-update the layout when the browser window is resized.
  26. container: $('#main'), // Optional, used for some extra CSS styling
  27. offset: 15, // Optional, the distance between grid items
  28. itemWidth: 230, // Optional, the width of a grid item
  29. direction :'right'
  30. };
  31.  
  32. //瀑布流布局
  33. function applyLayout() {
  34. $('#tiles').imagesLoaded(function() {
  35. // Destroy the old handler //是否需要销毁旧的布局
  36. if (handler.wookmarkInstance) {
  37. handler.wookmarkInstance.clear();
  38. }
  39.  
  40. // Create a new layout handler. //重新布局瀑布流
  41. handler = $('#tiles li');
  42. handler.wookmark(options); //传入配置参数
  43. });
  44. }
  45.  
  46. //当滚动条高度大于等于最后一个盒子高度 Ajax请求数据
  47. //绑定到scroll事件上
  48.  
  49. function onScroll(event) {
  50. // Check if we're within 100 pixels of the bottom edge of the broser window.
  51. var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
  52. var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - 100);
  53.  
  54. if (closeToBottom) {
  55. show();
  56. applyLayout(); //执行布局
  57. }
  58. };
  59.  
  60. // Capture scroll event.
  61. $(window).bind('scroll', onScroll);
  62.  
  63. // Call the layout function.
  64. handler = $('#tiles li'); //获取盒子
  65. handler.wookmark(options); //初始化瀑布流
  66. });
  67.  
  68. });
  1.  

Wookmark-jQuery瀑布流插件介绍和下载:http://www.wookmark.com/jquery-plugin/

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

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

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

Wookmark-jQuery-master 瀑布流插件的更多相关文章

  1. 自定义基于jquery竖向瀑布流插件

    公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...

  2. jquery.masonry瀑布流插件的4个使用步骤

    1.分别加载jquery插件与jquery.masonry插件两个文件 下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jque ...

  3. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

  4. 利用jQuery来扩展一个瀑布流插件

      简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...

  5. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  6. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  7. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  8. 基于jQuery封装一个瀑布流插件

    /*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...

  9. 瀑布流插件|jquery.masonry|使用demo

    Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...

  10. jQuery瀑布流插件masonry

    项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...

随机推荐

  1. Java在的时候,类定义HashSet初始化方法

    Java非常多的时间,应使用HashSet搜索功能,类的则定义,是HashSet类型的,我们定义数据成员之后,不好直接调用add函数来实现初始化,这个时候怎么办? 我们能够这样来做: public s ...

  2. 5、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle该项目的开发——使用datagrid做报表

    来点需要:我使用的数据库访问EF框架,但是,因为使用一个动态表来的统计报告中.单独是每天产生基于数据表,它是很难使用EF加盟前.所以我包装在两组数据库存取层的框内,一个是EF,一种是传统的ADO.NE ...

  3. 使用C#或javascript将Table里的数据导出到Excel

    原文:使用C#或javascript将Table里的数据导出到Excel Demo效果图: 用C#将Table数据导出Excel: 本方法已经将导出excel做成分部视图,引用时只需在视图中使用如下代 ...

  4. sql 子查询stuff功能(同一个人的多任务,多领域成为字符串)

    USE [erp2015] GO /****** Object: StoredProcedure [dbo].[GetUser] Script Date: 03/14/2015 13:27:04 ** ...

  5. JS 添加到事件的多个对象

    费周折码如下面: 方法一: <em>v</em>ar pArys=document.getElementsByClassName("ps"); for(va ...

  6. DOS call 中的%cd%,当前文件夹演示

    最近的工作要处理.bat文件,在dos文件错综复杂的调用过程中,我迷失了,于是%cd% @echo %cd% @cd %cd%\-- @pause @call %cd%\--\1.bat @pause ...

  7. ORACLE11G RAC 施加以分离不同的实例.TAF

    有套POS制 现在应用大量的,大量的数据,! 年前的交易在一定程度上的统计分析影响了额外的应用程序. 这两种应用分别OLTP和OLAP. 其实很多本项目具有的应用要求双方.  看了很多近期的其他系统, ...

  8. 【百度地图API】批量地址解析与批量反地址解析(带商圈数据)

    原文:[百度地图API]批量地址解析与批量反地址解析(带商圈数据) 摘要:因为地址解析的webserives方式还没有开通,所以先用JS版本的地址解析接口来批量获取地址解析数据吧,同时还能得到商圈的数 ...

  9. Webserver管理系列:3、Windows Update

    微软的操作系统可以使用用户过程中发现了一些漏洞,因此,他们经常发布一些系统补丁.因此,我们需要自己主动安装更新功能后,打开系统. 默认的更新功能未开启自己主动: 开启自己主动更新功能后.Windows ...

  10. 动画云创始人胥克谦&amp;课程格子创始人李天放分享创业经历

    原文地址:http://student.csdn.net/mcd/topic/163587/955044 2014年10月18日在北京科技大学成功举办了CSDN高校俱乐部全国巡讲,现场參会学生有一百余 ...