Bootstrap 响应式瀑布流 (使用wookmark)
使用瀑布布局
官方 http://www.wookmark.com/jquery-plugin
GitHub https://github.com/GBKS/Wookmark-jQuery （下载后里面有很多例子 ）
比如我的这个例子就是参考example-placeholder文件夹中的
很多例子还有一些很炫目的特效 我这里只用最基本的
这里面的reset.css style.css可以在从上方GitHub下载的文件中找到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> <link href="../css/bootstrap.css" rel="stylesheet">
<link href="reset.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<style>
</style>
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.wookmark.js"></script>
</head> <body> <div id="main">
<ul id="tiles">
<li >
<a href="http://www.wookmark.com/image/276712/deer-graphic-tattoo" target="_blank"><img src="http://images2.wookmark.com/deer-graphic-tattoo-wookmark-276712.jpg" alt="Deer Graphic | Tattoo!" width="200" height="321"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/276713/best-animal-tattoo-designs-follow-mary-buffington-tattoooo-s" target="_blank"><img src="http://images3.wookmark.com/best-animal-tattoo-designsfollow-mary-wookmark-276713.jpg" alt="Best Animal Tattoo Designs////Follow Mary Buffington ... | Tattoooo's" width="200" height="267"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277699/6b72d03ea919545f40ab390931360932-jpg-725-9100" target="_blank"><img src="http://images2.wookmark.com/277699_6b72d03ea919545f40ab390931360932.jpg" alt="6b72d03ea919545f40ab390931360932.jpg (725×9100)" width="200" height="2510"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277386/nike-2012-my-time-is-now-campaign-on" target="_blank"><img src="http://images1.wookmark.com/nike-2012-my-time-is-now-campaign-on-wookmark-277386.jpg" alt="Nike 2012 My Time Is Now Campaign on" width="200" height="3387"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277485/smile-we-heart-it" target="_blank"><img src="http://images1.wookmark.com/277485_large.jpg" alt="Smile :) | We Heart It" width="200" height="200"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277105/pinterest" target="_blank"><img src="http://images2.wookmark.com/pinterest-wookmark-277105.jpg" alt="Pinterest" width="200" height="200"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277178" target="_blank"><img src="http://images3.wookmark.com/277178_urc70zyeumm.jpg" alt="??? ????" width="200" height="200"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277097/freebie-psd-ui-kit-on" target="_blank"><img src="http://images3.wookmark.com/freebie-psd-ui-kit-on-behance-wookmark-277097.png" alt="Freebie PSD - UI Kit on" width="200" height="756"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277135/c2b949a32fcfde24469a379d7f62bec2-jpg-image-jpeg-390x900-pixels-redimensionn-e-97" target="_blank"><img src="http://images2.wookmark.com/277135_c2b949a32fcfde24469a379d7f62bec2.jpg" alt="c2b949a32fcfde24469a379d7f62bec2.jpg (Image JPEG, 390x900 pixels) - Redimensionnée (97%)" width="200" height="462"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277372/image-spark-image-tagged-photography-silhouette-claudia-kim" target="_blank"><img src="http://images2.wookmark.com/277372_597298c58c5eb14e579659e799c50612.jpg" alt="Image Spark - Image tagged "photography", "silhouette" - claudia_kim" width="200" height="300"></a>
</li>
<li>
<a href="http://www.wookmark.com/image/277457/river" target="_blank"><img src="http://images3.wookmark.com/277457_bvqm7dvayqg.jpg" alt="River" width="200" height="200"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277654/1487ea13a39bc2047af18fdf80b5d283-jpg-600-2375" target="_blank"><img src="http://images2.wookmark.com/1487ea13a39bc2047af18fdf80b5d283jpg-wookmark-277654.jpg" alt="1487ea13a39bc2047af18fdf80b5d283.jpg (600×2375)" width="200" height="792"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/276656" target="_blank"><img src="http://images3.wookmark.com/276656_tumblr_mh0b41otmb1rvylgbo1_500.png" alt="" width="200" height="237"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/276678/4aa9a805e39ab82dd17e5739b2b75ebc-jpg-633-960" target="_blank"><img src="http://images1.wookmark.com/4aa9a805e39ab82dd17e5739b2b75ebcjpg-wookmark-276678.jpg" alt="4aa9a805e39ab82dd17e5739b2b75ebc.jpg (633×960)" width="200" height="303"></a>
</li>
<li>
<a href="http://www.wookmark.com/image/277455/river" target="_blank"><img src="http://images1.wookmark.com/277455_bjkhcypv648.jpg" alt="River" width="200" height="284"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277456/river" target="_blank"><img src="http://images2.wookmark.com/277456_tgaidomdozk.jpg" alt="River" width="200" height="311"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277647/78d42b96992c4b5b070cc4783082dc37-png-600-8054" target="_blank"><img src="http://images1.wookmark.com/78d42b96992c4b5b070cc4783082dc37png-wookmark-277647.png" alt="78d42b96992c4b5b070cc4783082dc37.png (600×8054)" width="200" height="2685"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/276828/f-o-forgotten-nobility" target="_blank"><img src="http://images1.wookmark.com/276828_tumblr_mnsy5dzaro1qaoqu9o1_1280.jpg" alt="F&O Forgotten Nobility" width="200" height="289"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/276953" target="_blank"><img src="http://images3.wookmark.com/276953_tumblr_mk9ir81ry81qh7lhfo1_500.jpg" alt="" width="200" height="300"></a>
</li>
<li >
<a href="http://www.wookmark.com/image/277338/dope-illustrations" target="_blank"><img src="http://images1.wookmark.com/dope-illustrations-wookmark-277338.jpg" alt="Dope Illustrations" width="200" height="259"></a>
</li>
</ul>
</div> <script type="text/javascript">
(function ($){
// 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: 2, // Optional, the distance between grid items
itemWidth: 210, // Optional, the width of a grid item
fillEmptySpace: true // Optional, fill the bottom of each column with widths of flexible height
}; // Get a reference to your grid items.
var handler = $('#tiles li'); // Call the layout function.
handler.wookmark(options); // Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
$(this).css('height', newHeight+'px'); // Update the layout.
handler.wookmark();
}); })(jQuery);
</script> </body>
Bootstrap 响应式瀑布流 (使用wookmark)的更多相关文章
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 响应式瀑布流插件Grid-A-Licious
Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度, ...
- js实现响应式瀑布流
导读:瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest ...
- jQuery超酷响应式瀑布流效果
参考 http://www.sucaihuo.com/js/74.html <script src="scripts/blocksit.min.js"></scr ...
- javascript适合移动端的响应式瀑布流插件实例演示
在线预览 jQuery插件大全 实例代码 <div class="sucaihuo-container"> <div class="demo" ...
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- bootstrap响应式网页设计的9条基本原则！
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
- bootstrap响应式前端页面
技术:HTML+CSS+JS+bootstrap 概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...
随机推荐
- SendMessage用法实例
转: http://blog.csdn.net/coolszy/article/details/5523700 SendMessage用法 windowsbuttonmenucommandlistc# ...
- Top 10 Mapping APIs: Google Maps, Microsoft Bing Maps and MapQuest
http://www.programmableweb.com/news/top-10-mapping-apis-google-maps-microsoft-bing-maps-and-mapquest ...
- EJBCA认证系统结构及相关介绍
写作此文的主要目的是记录下EJBCA认证系统的系统结构及相关部件作用的介绍,方便后面查阅使用.
- BZOJ 3669: [Noi2014]魔法森林( LCT )
排序搞掉一维, 然后就用LCT维护加边MST. O(NlogN) ------------------------------------------------------------------- ...
- Linux学习之Makefile文件的编写
转自:http://goodcandle.cnblogs.com/archive/2006/03/30/278702.html 目的: 基本掌握了 make 的用法,能在Linux系统上编 ...
- 这两天写的mybatis配置文件，主要是有输出和输入的存储过程
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...
- 上星期IOS的一个面试题。
美丽说面试题 1,IOS是怎样进行内存管理的,什么是ARC. 2,声明Property时,assign,nonatomic,readonly,retain,copy(各什么意思,括号里没打印出来,我猜 ...
- pl sql 无法解析指定的连接标识符
使用PLSQL Developer时,“ORA-12154: TNS:无法解析指定的连接标识符”问题的一个解决办法< xmlnamespace prefix ="o" ...
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多
- mysql null值问题
mysql> create table test( sn int, -> `createdTime` datetime NOT NULL COMMENT '创建时间', -> `up ...