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

要求

  • 必备知识

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

  • 开发环境

    Dreamweaver CS6 / Chrome浏览器

  • 演示地址

    演示地址资料下载

 

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

程序核心代码看这里:

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

官方在线演示地址: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. springmvc+ztree v3实现类似表单回显功能

    在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...

  2. ASP.Net MVC 数据处理

    ASP.Net MVC 数据处理   第三天我们将学习Asp.Net中数据处理功能,了解数据访问层,EF,以及EF中常用的代码实现方式,创建数据访问层和数据入口,处理Post数据,以及数据验证等功能. ...

  3. 使用Maven在Eclipse中创建Web项目[转]

    一.新建 Maven Web项目 1.新建Maven Project new project-->选择 Maven Project --> 下一步 选择工作空间 -->下一步 在Fi ...

  4. B二分法

    <span style="color:#330099;">/* B - 二分法 基金会 Time Limit:1000MS Memory Limit:65536KB 6 ...

  5. 关于Java的对象、数组、String类的具体用法

    对象的行为: 1.内存分配(栈和堆的区别) 栈:保存局部变量的值(用来保存基本数据类型的值:保存类的实例的引用) 对:用来存放动态产生的数据,比如new出来的对象 2.调用方法 方法返回一个值.方法不 ...

  6. Introducing Visual Studio’s Emulator for Android

    visual studio 2015支持Android开发了. Microsoft released Visual Studio 2015 Preview this week and with it ...

  7. Theano学习笔记(一)——代数

    标量相加 import theano.tensor as T from theano import function x = T.dscalar('x') y = T.dscalar('y') z = ...

  8. iframe的各项參数

    iframe的各项參数: <iframe src="test.jsp" width="100″ height="50″ frameborder=" ...

  9. C# 实现设置系统环境变量设置

    原文:C# 实现设置系统环境变量设置 以前实现系统环境变量设置时是要在电脑属性--高级--环境变量设置,实现方式主要有2种, 修改注册表,添加环境变量 调用系统Kernel32.DLL函数,设置环境变 ...

  10. 移植MonkeyRunner的图片对比和获取子图功能的实现-UiAutomator/Robotium篇

    根据前一篇文章<移植MonkeyRunner的图片对比和获取子图功能的实现-Appium篇>所述,因为Appium和MonkeyRunner有一个共同点--代码控制流程都是在客户端实现的. ...