很流行的瀑布流展示
并且当鼠标悬浮 旋转图片 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就是针对iOS平台实现图文混编瀑布流的一个示例代码。 瀑布流的核心在于UICollectionView，它是iOS中的一个视图组件，可以用来展示可滚动的、多行多列的数据集合，非常适合用来构建瀑布流布局。下面将详细介绍...
本实例源码将重点讲解如何实现RecyclerView的瀑布流布局，同时也会对比ListView和GridView的基本用法。 瀑布流布局（Waterfall Flow）是一种常见的列表展示方式，常用于电商应用的商品展示，它让每个列表项根据屏幕...
瀑布流ListView，也被称为WaterFall或Infinite Scroll，是一种在Android平台上常见的布局方式，尤其适用于展示图片或商品信息。这种布局模拟了瀑布下落的效果，每一行的高度根据内容自适应，使得界面更具视觉吸引力...
这个“微软WPF示例源码大全”集合包含了一系列官方示例，涵盖了WPF的多个核心功能和特性，对于开发者来说，是深入理解和学习WPF技术的宝贵资源。 1. **WPFHostingWin32Control.zip**： 这个示例展示了如何在WPF...
基于Pytorch的量化感知训练实现示例_附项目源码+流程教程_优质项目实战
瀑布流布局，又称Masonry布局，是iOS应用中一种常见的展示大量内容的布局方式，尤其在图片、商品展示等场景中十分流行。这种布局模仿了瀑布流动的效果，使得屏幕空间得以充分利用，每行元素的高度不固定，根据内容...
这些压缩包文件包含了一系列小程序的源码示例，总计约60个，是学习和理解小程序开发的宝贵资源。小程序是一种轻量级的应用形式，它无需下载安装即可使用，广泛应用于生活服务、电商购物、社交互动等多个领域。通过...
在这个名为"易语言源码图文处理数据库示例.rar"的压缩包中，包含了易语言的一个实际应用示例，即图文处理与数据库交互的功能。 首先，我们要理解什么是图文处理。在计算机领域，图文处理通常指的是对图像和文字进行...
**Three.js 源码与 Demo 示例详解** Three.js 是一款基于 WebGL 的开源 JavaScript 库，专门用于在 Web 上创建和展示三维图形。这个库以其轻量级、易用性和强大的功能而广受开发者喜爱。它封装了 WebGL 的复杂性，...
CSS3版本的图片瀑布流可很好的应用于手机APP中，当然本示例是在PC端，两者均有很好的表现。 本瀑布流布局同时还带有图片预览功能，当用户随意单击瀑布流中的任意图片时，图片渐变放大显示，单击图片右上角的关闭...
通过分析和研究"VC++ api hook 源码 带示例"，你可以深入理解API Hook的工作原理，掌握在VC++环境中如何实现和应用这一技术，为你的软件开发添加更多可能性。同时，也要注意使用API Hook时要尊重用户隐私和系统稳定...
"SuperSocketClient"文件则是客户端的示例源码，它展示了如何建立与服务器的连接、发送自定义命令以及接收服务器响应。客户端代码通常包括连接服务器、构造并发送数据、处理来自服务器的响应以及断开连接等步骤。这...
JavaSLG游戏开发入门示例及其源码（源码在jar内）
微信小程序开发入门到精通经典图文教程带很多源码示例，入门学习必备教程，绝对物超所值，如果想进阶请下载小程序应用-微信小程序开发实战精典图文带后台案例解析教程，微信小程序简称小程序，英文名Mini Program，...
大中型的实用项目中，多人协作开发，除了分层次目录存放源码，还要考虑源码权限，自动化的编译方案。linux下开发，makefile树，是一种常用方案。本资源是一个项目目录树和makefile树的简单示例。具体说明参考：...
瀑布流布局，又称Masonry布局，是网页设计中一种流行的方式，主要用于展示图像或内容时，使得页面在不同尺寸的屏幕下都能自适应并保持美观的视觉效果。它模仿了真实世界中的瀑布，使得每个元素根据其自身的大小垂直...
例如，一个示例可能教你如何用GDI+绘制一个带有渐变填充的圆角矩形，另一个可能展示如何利用GraphicsPath创建复杂的自定义形状，还有可能是如何高效地读取和显示图像。 总之，深入研究“GDI+编程顶级示例(附 源码)...
本指南将深入探讨Qt5.9的关键特性和开发实践，结合提供的示例源码，帮助读者快速上手并掌握Qt编程。 1. **安装与环境配置** - 安装Qt5.9 SDK：包括Qt Creator IDE和必要的库文件。 - 配置编译器：如GCC或MSVC，...
钉钉考勤数据下载的示例代码，分享给需要的朋友！ 本示例是用corpsecret和corpid来获取access_token的，现在钉钉接口改成用appKey和appSecret来获取token了，不过方法大同小异，换一下调用接口的地址和参数就可以...