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逻辑较少,页面都是静态,未接入接口.响应 ...
随机推荐
- jQuery为多个元素绑定相同的事件
方式一: // 假设$("#div1", "#divN")有多个对象$("#div1", "#divN").each(f ...
- 通过class类来实例化其他类的对象（使用有参构造函数）
import java.lang.reflect.Constructor; import java.lang.reflect.InvocationTargetException; class Pers ...
- 测试linux和window下 jdk最大能使用多大内存
在命令行下用 java -XmxXXXXM -version 命令来进行测试,然后逐渐的增大XXXX的值,如果执行正常就表示指定的内存大小可用,否则会打印错误信息. 发现在linux先 最多用java ...
- 派生类地址比基类地址少4（子类与基类指针强行转换的时候，值居然会发生变化，不知道Delphi BCB是不是也这样） good
大家对虚表并不陌生,都知道每个含有虚函数的类对象都有1个虚指针,但是在现实使用中,却总是因为这而调试半天,才发现原来是虚指针惹的祸.我这几天在调试代码时候也中招了,我的问题是这样的,如下图,CTree ...
- delphi 7 下安装 indy 10.5.8 教程
本教程用 indy 10.5.8 替换 delphi 7 自带的 indy 版本,让大家深入了解 delphi 组件安装的方法. 第一步:下载 indy 10.5.8 组件,解压到合适的目录里.如 D ...
- delphi datasnap 心跳包
为了能让我们的服务程序更加稳定,有些细节问题必须解决.就如上一讲中提到的客户端拔掉网线,造成服务器上TCP变成死连接,如果死连接数量过多,对服务器能长期稳定运行是一个巨大的威胁.另外,经过测试,如果服 ...
- cssline-height行高 全解
1. 基线.底线.顶线 2. 行距.行高 3. 内容区 4. 行内框 5. 行框 元素对行高的影响 扩展阅读 1. 基线.底线.顶线 行高指的是文本行的基线间的距离. 基线并不是汉字的下端 ...
- HDU 3336 Count the string
题解:利用next数组来保存前缀位置,递推求解. #include <cstdio> #include <cstring> char pat[200005]; int next ...
- Duanxx的图像处理学习： 透视变换(一)
当人用眼睛看事物的时候,会感觉到近处的东西是比远处的东西要大一些的,通俗的说,这就是透视. 总的来说.透视变换是将3D的世界转换到2D图像上的一种手段,人的视觉系统和摄像头视觉系统也是基于这一工作原理 ...
- Primefaces 中e.offset(...)问题的处理
问题 在使用Primefaces构建的页面中,原来好好的页面莫名奇异的出现下拉框不能显示数据且点击没有反应的情况.后来通过firefox发现其JS抛出了一个e.offset(...)错误 解决方法 经 ...