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逻辑较少,页面都是静态,未接入接口.响应 ...
随机推荐
- 机器学习Matlab打击垃圾邮件的分类————朴素贝叶斯模型
该系列来自于我<人工智能>课程回顾总结,以及实验的一部分进行了总结学习机 垃圾分类是有监督的学习分类最经典的案例,本文首先回顾了概率论的基本知识.则以及朴素贝叶斯模型的思想.最后给出了垃圾 ...
- @AutoWired使用
Spring MVC @autowired的使用: spring MVC使用注解配置方式相对于xml配置方式具有很多优势: 充分利用java的反射机制获取类的结构信息,这些信息可以减少配置的工作!Sp ...
- MySQL中的insert ignore into, replace into等的一些用法小结（转）
MySQL中的insert ignore into, replace into等的一些用法总结(转) 在MySQL中进行条件插入数据时,可能会用到以下语句,现小结一下.我们先建一个简单的表来作为测试: ...
- 浅谈 non-blocking I/O Multiplexing + poll/epoll 的正确使用
在前面的文章中曾经粗略讲过poll,那时是用阻塞IO实现,在发送和接收数据量都较小情况下和网络状况良好的情况下是基本没有问题的,read 不会只接收部分数据,write 也不会一直阻塞.但实际上pol ...
- IOS 特定于设备的开发:检查设备接近度和电池状态
UIDevice类提供了一些API,使你能够跟踪设备的特征,包括电池的状态和接近度传感器.他们二者都以通知的形式提供更新,可以订阅他们,以便在有重要的更新时通知你的应用程序. 1>启动和禁用接近 ...
- C# async await 例子
private static async void Worker() { Console.Write("main thread id is :{0}",Thread.Current ...
- 如何在windows的DOS窗口中正常显示中文(UTF-8字符)
打开CMD.exe命令行窗口,通过 chcp命令改变代码页 UTF-8的代码页为65001,ANSI/OEM - 简体中文 GBK为936,window default OEM - 美国为437 如果 ...
- Storm博客收集
http://wbj0110.iteye.com/category/292875 http://blog.csdn.net/hguisu/article/details/8454368?reload ...
- Win7下超级管理员创建普通权限任务
已转至新的博客 http://www.raysoftware点击打开链接.cn/?p=49 项目中用到一个功能,Win7下超级管理员创建普通权限任务. 试了几种办法,例如获取资源管理器的Token,然 ...
- 深入浅出Mybatis系列（八）---mapper映射文件配置之select、resultMap good
上篇<深入浅出Mybatis系列(七)---mapper映射文件配置之insert.update.delete>介绍了insert.update.delete的用法,本篇将介绍select ...