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逻辑较少,页面都是静态,未接入接口.响应 ...
随机推荐
- 算法精解（C语言描述） 第4章 读书笔记
第4章 算法分析 1.最坏情况分析 评判算法性能的三种情况:最佳情况.平均情况.最坏情况. 为何要做最坏情况分析: 2.O表示法 需关注当算法处理的数据量变得无穷大时,算法性能将趋近一个什么样的值.一 ...
- jQuery Mobile基础
1.安装 在<head></head>标签里边写入以下内容 jQuery Mobile CDN: <head> <meta charset="utf ...
- iOS的扩展类,扩展属性
Objective-C有两个扩展机制:Associative和Category.Category用来扩展类方法,Associative用于扩展属性.Associative机制的原理是把两个对象关联起来 ...
- Infragistics的介绍以及在ASP.net中使用的总结
Infragistics系列控件是一套很好,很强大的控件,.感觉很好..现在自己做项目也用..却发现网上没有一套中文的教程,中文资料都很少..在这里就把自己的研究心得写下来... 首先安装,一步一步装 ...
- Java环境的配置
JAVA环境: 1.打开我的电脑--属性--高级--环境变量 2.将相应的JDK环境下载到本机,将路径保存到无中文路径中,并将路径复制下来. 3.在环境变量--系统变量,中新建 变量名:JAVA_HO ...
- gdb 命令使用
1.gdb -x command.txt 每次重复输入命令很麻烦,可以使用上面的命令,把命令输入进command.txt里面,然后直接就可以执行gdb. 2.list 2.1 list functio ...
- fatal error LNK1123: failure during conversion to COFF: file invalid or corr
新装VS2010出现标题的错误,使用了下面的方法,不行 这个是由于日志文件引起的,可以将 项目\属性\配置属性\清单工具\输入和输出\嵌入清单:原来是"是",改成"否&q ...
- Centos6.5中 一键安装LNMP 安装Yii2.0 手工配置
1.一键安装LNMP cd /usr wget -c http://soft.vpser.net/lnmp/lnmp1.2-full.tar.gz tar zxf lnmp1.-full.tar.gz ...
- 几本不错的开源书（to be continued）
Linux 1.working-on-gnu-linux GNU/Linux 至今已經相當成熟並足以應付日常生活之使用,凍仁也於 2009 年開始使用它來工作至今,將藉由此書 1 來撰寫較有系統的文章 ...
- page cache和buffer cache
因为要优化I/O性能,所以要理解一下这两个概念,这两个cache着实让我迷糊了好久,通过查资料大概明白了两者的区别,试着说下. page cache:文件系统层级的缓存,从磁盘里读取的内容是存储到这里 ...