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 ...
随机推荐
- hdu 4407 Sum 容斥+当前离线
乞讨X-Y之间p素数,,典型的纳入和排除问题,列的求和运算总和的数,注意,第一项是最后一个项目数. 如果不改变到第一记录的答案,脱机处理,能保存查询,候,遇到一个操作1,就遍历前面的操作.把改动加上去 ...
- android app启动过程(转)
Native进程的运行过程 一般程序的启动步骤,可以用下图描述.程序由内核加载分析,使用linker链接需要的共享库,然后从c运行库的入口开始执行. 通常,native进程是由shell或者init启 ...
- SVN常见错误两项纪录
1.svn cleanup failed–previous operation has not finished; run cleanup if it was interrupted 也许前clean ...
- js中不同的height, top的对比
每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...
- HR系统邮件审批功能总结
时至今日,来兰亭工作的第三个小任务算是暂时告一段落了.这个小任务是耗费时间最长的,因此在这里总结整理一下. 首先这个功能的出发点是方法领导进行手下员工的审批,包括加班申请,休假申请,和漏打卡申请.由于 ...
- express: command not found.
npm install -g express 可是不行.全局模式不行. With the release of Express 4.0.0 it looks like you need to do s ...
- linux终奌站 信息 格式 更改 /etc/bashrc
gedit /etc/bashrc shell环境下默认的特殊符号意义: \d :代表日期,格式为weekday month date,比如:"Sun Sep 18" \H :完整 ...
- 【Python】Python与文本处理langid工具包的文本语言检测和歧视
1.问题的叙述性说明 使用Python文本处理.文字有时被包括中国.英语.在日本和其他语言文字,进行处理.这个时候就须要判别当前文本是属于哪个语系的. Python中有个langid工具包提供了此功能 ...
- 通用Key-Value存储系统的存储管理策略解析
Key-Value存储作为NoSQL存储的一种常见方式,提供了比SQL数据库更好的可扩展性和读写性能. 比方当前开源最热门的Memcached和Redis:淘宝的Tair.腾讯的Cme ...
- 关于tasklet的一点小小的解释
大概有一些同学对tasklet的串行化还有点困惑,其实在单处理器上最好理解,所以本帖主要讨论多处理器上tasklet如何实现串行化:同一个tasklet对象同一时刻只能在一个处理器上运行. 在 驱动程 ...