Wookmark-jQuery-master 瀑布流插件
Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO
要求
测试预览截图(抬抬你的鼠标就可以看到演示地址哦):
程序核心代码看这里:

$(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 瀑布流插件的更多相关文章
- 自定义基于jquery竖向瀑布流插件
公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...
- jquery.masonry瀑布流插件的4个使用步骤
1.分别加载jquery插件与jquery.masonry插件两个文件 下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jque ...
- jQuery插件之-瀑布流插件
jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...
- 利用jQuery来扩展一个瀑布流插件
简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- jQuery动态网格瀑布流插件Masonry
Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...
- 基于jQuery封装一个瀑布流插件
/*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...
- 瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...
- jQuery瀑布流插件masonry
项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...
随机推荐
- springmvc+ztree v3实现类似表单回显功能
在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...
- ASP.Net MVC 数据处理
ASP.Net MVC 数据处理 第三天我们将学习Asp.Net中数据处理功能,了解数据访问层,EF,以及EF中常用的代码实现方式,创建数据访问层和数据入口,处理Post数据,以及数据验证等功能. ...
- 使用Maven在Eclipse中创建Web项目[转]
一.新建 Maven Web项目 1.新建Maven Project new project-->选择 Maven Project --> 下一步 选择工作空间 -->下一步 在Fi ...
- B二分法
<span style="color:#330099;">/* B - 二分法 基金会 Time Limit:1000MS Memory Limit:65536KB 6 ...
- 关于Java的对象、数组、String类的具体用法
对象的行为: 1.内存分配(栈和堆的区别) 栈:保存局部变量的值(用来保存基本数据类型的值:保存类的实例的引用) 对:用来存放动态产生的数据,比如new出来的对象 2.调用方法 方法返回一个值.方法不 ...
- Introducing Visual Studio’s Emulator for Android
visual studio 2015支持Android开发了. Microsoft released Visual Studio 2015 Preview this week and with it ...
- Theano学习笔记(一)——代数
标量相加 import theano.tensor as T from theano import function x = T.dscalar('x') y = T.dscalar('y') z = ...
- iframe的各项參数
iframe的各项參数: <iframe src="test.jsp" width="100″ height="50″ frameborder=" ...
- C# 实现设置系统环境变量设置
原文:C# 实现设置系统环境变量设置 以前实现系统环境变量设置时是要在电脑属性--高级--环境变量设置,实现方式主要有2种, 修改注册表,添加环境变量 调用系统Kernel32.DLL函数,设置环境变 ...
- 移植MonkeyRunner的图片对比和获取子图功能的实现-UiAutomator/Robotium篇
根据前一篇文章<移植MonkeyRunner的图片对比和获取子图功能的实现-Appium篇>所述,因为Appium和MonkeyRunner有一个共同点--代码控制流程都是在客户端实现的. ...