很流行的瀑布流展示
并且当鼠标悬浮 旋转图片 div
外加很酷的jquery展示......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Grid Gallery Plugin</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animation.css">
</head>
<body>
<div id="header">
<h1>jQuery pinterest style gallery</h1>
<p>Support the front&back div container transition, optional lightbox.</p>
</div>
<!-- large image -->
<div id="largeImage" class="largeContainer"></div>
<div id="main">
<ul id="tiles">
<!-- grid thumbnails -->
<li data-large="images/lychee/img1.jpg">
<div class="front">
<img src="images/thumbs/lychee/img1.jpg" width="200" height="134" /><p>Short image caption.</p>
</div>
<div class="back">
<h4>Image Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li data-large="images/lychee/img3.jpg">
<div class="front">
<img src="images/thumbs/lychee/img3.jpg" width="200" height="298" />
</div>
<div class="back">
<h4>Image Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in.</p>
</div>
</li>
<li data-type="video" data-large="http://player.vimeo.com/video/31215588?title=0&byline=0&portrait=0" data-width="960" data-height="480">
<div class="front">
<img src="images/thumbs/vimeo.jpg" width="200" height="133">
</div>
<div class="back">
<h4>Image Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li data-large="images/lychee/img2.jpg">
<div class="front">
<img src="images/thumbs/lychee/img2.jpg" width="200" height="134" /><p><strong>Optional front and back div container</strong><br /> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<div class="back">
<h4>Image Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li data-large="images/lychee/img4.jpg">
<div class="front">
<img src="images/thumbs/lychee/img4.jpg" width="200" height="298" />
</div>
<div class="back">
<h4>Image Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li data-large="images/lychee/img6.jpg">
<div class="front">
<img src="images/thumbs/lychee/img6.jpg" width="200" height="134" />
</div>
<div class="back">
<h4>Image Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li data-large="images/lychee/img7.jpg">
<div class="front">
<img src="images/thumbs/lychee/img7.jpg" width="200" height="298" />
</div>
<div class="back">
<h4>Image Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<!--
<li data-large="images/lychee/img8.jpg">
<img src="images/thumbs/lychee/img8.jpg" width="200" height="134" />
</li>
-->
<li data-large="images/flickr_images/img3.jpg">
<img src="images/thumbs/flickr_images/img3.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img4.jpg">
<img src="images/thumbs/flickr_images/img4.jpg" width="200" height="300" />
</li>
<li data-large="images/flickr_images/img5.jpg">
<img src="images/thumbs/flickr_images/img5.jpg" width="200" height="133" />
</li>
<li data-type="video" data-large="http://www.youtube.com/embed/Dbs504zDN6I?rel=0" data-width="800" data-height="420">
<div class="front">
<img src="images/thumbs/y2.jpg" width="200" height="141">
</div>
<div class="back">
<h4>Image Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li>
<div class="info front" style="width:200px;height:120px">
<h4>Put the text on front</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<div class="back">
<img src="images/thumbs/lychee/img8_120.jpg" width="200" height="120" />
</div>
</li>
<li>
<div class="info" style="width:200px;height:250px">
<h4>Another text block</h4>
<p>Transition support <strong>flip, skew, flipX, flipY, wave, fan, skew, curl, papercut, zipper, fade, twirl</strong>. <br /></p>
<p>Optional lightbox large image or video. </p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li data-large="images/flickr_images/img6.jpg">
<img src="images/thumbs/flickr_images/img6.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img7.jpg">
<img src="images/thumbs/flickr_images/img7.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img8.jpg">
<img src="images/thumbs/flickr_images/img8.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img9.jpg">
<img src="images/thumbs/flickr_images/img9.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img10.jpg">
<img src="images/thumbs/flickr_images/img10.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img11.jpg">
<img src="images/thumbs/flickr_images/img11.jpg" width="200" height="300" />
</li>
<li data-large="images/flickr_images/img13.jpg">
<img src="images/thumbs/flickr_images/img13.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img17.jpg">
<img src="images/thumbs/flickr_images/img17.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img20.jpg">
<img src="images/thumbs/flickr_images/img20.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img21.jpg">
<img src="images/thumbs/flickr_images/img21.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img22.jpg">
<img src="images/thumbs/flickr_images/img22.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img24.jpg">
<img src="images/thumbs/flickr_images/img24.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img27.jpg">
<img src="images/thumbs/flickr_images/img27.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img28.jpg">
<div class="front">
<img src="images/thumbs/flickr_images/img28.jpg" width="200" height="133" />
</div>
<div class="back">
<h4>Image Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li data-large="images/flickr_images/img30.jpg">
<img src="images/thumbs/flickr_images/img30.jpg" width="200" height="133" />
</li>
<li data-large="images/flickr_images/img31.jpg">
<div class="front">
<img src="images/thumbs/flickr_images/img31.jpg" width="200" height="133" />
</div>
<div class="back">
<h4>Image Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
</ul>
</div>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.wookmark.min.js" type="text/javascript"></script>
<script src="js/jquery.pinterestgallery.min.js" type="text/javascript"></script>
<script src="js/modernizr.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(new function() {
$('#tiles').pinterestGallery({
largeContainerID: 'largeImage',
animateStyle: 'twirl',
gridOptions: {
autoResize: true,
container: $('#main'),
offset: 8,
itemWidth: 210
}
});
});
</script>
</body>
</html>
更多内容 请参考我的个人博客 http://ismartstudio.com/
相关推荐
回到我们的实例源码Demo_recyclerview，这个示例包含了如何在RecyclerView中实现瀑布流布局的全过程。首先，我们需要导入必要的库，包括RecyclerView和StaggeredGridLayoutManager。然后，在Activity中初始化...
"全套EasyUI示例源码"是一个包含三十多个组件的完整示例集合，可以帮助开发者深入理解和使用EasyUI。 1. **EasyUI组件介绍** - **布局组件**：如面板（panel）、窗口（window）、对话框（dialog）、分页...
瀑布流布局，又称Masonry布局，是iOS应用中一种常见的展示大量内容的布局方式，尤其在图片、商品展示等场景中十分流行。这种布局模仿了瀑布流动的效果，使得屏幕空间得以充分利用，每行元素的高度不固定，根据内容...
【uniapp项目源码示例房源系统】是一个基于uniapp框架构建的应用程序，主要用于演示和学习如何在房地产领域创建一个房源管理系统。uniapp是一个多端开发框架，它允许开发者使用一套代码来构建iOS、Android、Web、小...
**Three.js 源码与 Demo 示例详解** Three.js 是一款基于 WebGL 的开源 JavaScript 库，专门用于在 Web 上创建和展示三维图形。这个库以其轻量级、易用性和强大的功能而广受开发者喜爱。它封装了 WebGL 的复杂性，...
CSS3版本的图片瀑布流可很好的应用于手机APP中，当然本示例是在PC端，两者均有很好的表现。 本瀑布流布局同时还带有图片预览功能，当用户随意单击瀑布流中的任意图片时，图片渐变放大显示，单击图片右上角的关闭...
通过分析和研究"VC++ api hook 源码 带示例"，你可以深入理解API Hook的工作原理，掌握在VC++环境中如何实现和应用这一技术，为你的软件开发添加更多可能性。同时，也要注意使用API Hook时要尊重用户隐私和系统稳定...
"SuperSocketClient"文件则是客户端的示例源码，它展示了如何建立与服务器的连接、发送自定义命令以及接收服务器响应。客户端代码通常包括连接服务器、构造并发送数据、处理来自服务器的响应以及断开连接等步骤。这...
Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
这个压缩包文件“IOS应用源码——类似于Pinterest的瀑布墙图片展示demo.zip”是一个iOS应用的源代码示例，主要用于实现一种类似Pinterest的瀑布流图片展示效果。Pinterest是一款知名的社交平台，其特色在于用户可以...
JavaSLG游戏开发入门示例及其源码（源码在jar内）
本篇文章将围绕“camunda7.17视频课程源码分享”这一主题，深入探讨Camunda 7.17版本的相关知识点，以及提供的各种示例代码，帮助读者更好地理解和应用Camunda。 首先，让我们了解Camunda工作流引擎的核心概念。...
大中型的实用项目中，多人协作开发，除了分层次目录存放源码，还要考虑源码权限，自动化的编译方案。linux下开发，makefile树，是一种常用方案。本资源是一个项目目录树和makefile树的简单示例。具体说明参考：...
例如，一个示例可能教你如何用GDI+绘制一个带有渐变填充的圆角矩形，另一个可能展示如何利用GraphicsPath创建复杂的自定义形状，还有可能是如何高效地读取和显示图像。 总之，深入研究“GDI+编程顶级示例(附 源码)...
本指南将深入探讨Qt5.9的关键特性和开发实践，结合提供的示例源码，帮助读者快速上手并掌握Qt编程。 1. **安装与环境配置** - 安装Qt5.9 SDK：包括Qt Creator IDE和必要的库文件。 - 配置编译器：如GCC或MSVC，...
本例在 vs2010 环境下使用 vb.net 语言+aceess 数据库开发发的商品销售管理系 里面有对 treeview 和datagridview 的使用方法的例子 vs2010 vb.net+access实用示例附源码
标题中的“threejs一些示例及源码,包括智慧城市.粮仓,浮雕,下雨,三维地球...”表明这是一个关于Three.js的资源集合，其中包含了各种应用场景的示例代码，如智慧城市模拟、粮仓的3D展示、浮雕效果、下雨效果以及三维...
钉钉考勤数据下载的示例代码，分享给需要的朋友！ 本示例是用corpsecret和corpid来获取access_token的，现在钉钉接口改成用appKey和appSecret来获取token了，不过方法大同小异，换一下调用接口的地址和参数就可以...
上期技术CTP接口示例源码 分享给大家 希望大家喜欢
《QML和Qt Quick快速入门》示例源码是一份专为初学者设计的资源，旨在帮助理解并掌握QML和Qt Quick这两种强大的GUI开发工具。QML（Qt Meta Language）是Qt框架的一部分，用于创建现代、动态且响应迅速的用户界面。Qt...