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 ...
随机推荐
- Java在的时候,类定义HashSet初始化方法
Java非常多的时间,应使用HashSet搜索功能,类的则定义,是HashSet类型的,我们定义数据成员之后,不好直接调用add函数来实现初始化,这个时候怎么办? 我们能够这样来做: public s ...
- 5、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle该项目的开发——使用datagrid做报表
来点需要:我使用的数据库访问EF框架,但是,因为使用一个动态表来的统计报告中.单独是每天产生基于数据表,它是很难使用EF加盟前.所以我包装在两组数据库存取层的框内,一个是EF,一种是传统的ADO.NE ...
- 使用C#或javascript将Table里的数据导出到Excel
原文:使用C#或javascript将Table里的数据导出到Excel Demo效果图: 用C#将Table数据导出Excel: 本方法已经将导出excel做成分部视图,引用时只需在视图中使用如下代 ...
- sql 子查询stuff功能(同一个人的多任务,多领域成为字符串)
USE [erp2015] GO /****** Object: StoredProcedure [dbo].[GetUser] Script Date: 03/14/2015 13:27:04 ** ...
- JS 添加到事件的多个对象
费周折码如下面: 方法一: <em>v</em>ar pArys=document.getElementsByClassName("ps"); for(va ...
- DOS call 中的%cd%,当前文件夹演示
最近的工作要处理.bat文件,在dos文件错综复杂的调用过程中,我迷失了,于是%cd% @echo %cd% @cd %cd%\-- @pause @call %cd%\--\1.bat @pause ...
- ORACLE11G RAC 施加以分离不同的实例.TAF
有套POS制 现在应用大量的,大量的数据,! 年前的交易在一定程度上的统计分析影响了额外的应用程序. 这两种应用分别OLTP和OLAP. 其实很多本项目具有的应用要求双方. 看了很多近期的其他系统, ...
- 【百度地图API】批量地址解析与批量反地址解析(带商圈数据)
原文:[百度地图API]批量地址解析与批量反地址解析(带商圈数据) 摘要:因为地址解析的webserives方式还没有开通,所以先用JS版本的地址解析接口来批量获取地址解析数据吧,同时还能得到商圈的数 ...
- Webserver管理系列:3、Windows Update
微软的操作系统可以使用用户过程中发现了一些漏洞,因此,他们经常发布一些系统补丁.因此,我们需要自己主动安装更新功能后,打开系统. 默认的更新功能未开启自己主动: 开启自己主动更新功能后.Windows ...
- 动画云创始人胥克谦&课程格子创始人李天放分享创业经历
原文地址:http://student.csdn.net/mcd/topic/163587/955044 2014年10月18日在北京科技大学成功举办了CSDN高校俱乐部全国巡讲,现场參会学生有一百余 ...