很流行的瀑布流展示
并且当鼠标悬浮 旋转图片 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/
相关推荐
瀑布流布局是一种常见的网页设计模式，它以一种类似瀑布的方式排列元素，每个元素的大小可能不一，使得页面看起来错落有致，富有视觉吸引力。这种布局方式在展示图片、商品或者个人作品集时尤其常见，因为它能有效地...
AutoJs源码-屏幕旋转示例。本资源购买前提醒：本源码都是实际autojs项目模板，安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！...
Android的瀑布流源码通常包括了自定义的RecyclerView Adapter和LayoutManager，以及对网络请求、图片加载库的集成。 在这个"Android 瀑布流源码.zip"压缩包中，我们可以找到以下关键文件： 1. `1-120R02036280-L....
回到我们的实例源码Demo_recyclerview，这个示例包含了如何在RecyclerView中实现瀑布流布局的全过程。首先，我们需要导入必要的库，包括RecyclerView和StaggeredGridLayoutManager。然后，在Activity中初始化...
瀑布流ListView，也被称为WaterFall或Infinite Scroll，是一种在Android平台上常见的布局方式，尤其适用于展示图片或商品信息。这种布局模拟了瀑布下落的效果，每一行的高度根据内容自适应，使得界面更具视觉吸引力...
软件测试-selenium-web自动化测试示例-py源码 展示了如何使用 selenium 进行自动化测试，包括打开网页、输入文本、提交表单以及验证结果。
【标题】"IOS应用源码Demo-类似于Pinterest的瀑布墙图片展示demo-毕设学习.zip"揭示了这个压缩包中的核心内容，即一个基于iOS平台的源代码示例项目，该示例模仿了Pinterest的瀑布流图片展示效果。在iOS应用开发中，...
在提供的"Android 瀑布流源码.rar"压缩包中，包含了一个Android瀑布流的示例项目"Android+瀑布流+Demo.rar"，以及两个其他文件："1-120R02036280-L.png"可能是一个用于演示的图片文件，而"NoCome.txt"可能是无关的...
瀑布流布局，又称为Pinterest布局，是Android应用中一种常见的展示大量信息的方式，尤其在图片浏览、电商商品展示等场景中十分流行。这种布局模仿了自然瀑布垂直下落的效果，每一项元素根据屏幕宽度自动调整大小和...
ZedGraphV515SampleCS_(动态实时曲线示例-全部源码) 1、c#的开源的图形控件,可用来画曲线或柱状等图形,功能强大)； 2、在原有基础的上改进； 3、动态实时曲线； 4、c#2005全部源码。
这个"Activiti工作流示例Activiti Demo"提供了完整的源代码，帮助开发者深入理解并实际操作Activiti，从而更好地在自己的项目中应用。 在描述中提到的"Canvas动画"是指Activiti提供的可视化建模工具，它允许开发者...
"全套EasyUI示例源码"是一个包含三十多个组件的完整示例集合，可以帮助开发者深入理解和使用EasyUI。 1. **EasyUI组件介绍** - **布局组件**：如面板（panel）、窗口（window）、对话框（dialog）、分页...
瀑布流布局，又称Masonry布局，是iOS应用中一种常见的展示大量内容的布局方式，尤其在图片、商品展示等场景中十分流行。这种布局模仿了瀑布流动的效果，使得屏幕空间得以充分利用，每行元素的高度不固定，根据内容...
本示例源码库包含了agGrid的多种常见功能的实现代码，有助于开发者更好地理解和运用这个组件。 1. **数据绑定**：agGrid的核心特性是能够高效地与各种数据源进行绑定，包括数组、Promise、Observable等。源码中可能...
这个压缩包“Android应用源码瀑布流实现，类似于蘑菇街和迷尚应用里的排列”提供了一个实现此类布局的示例源码，对于理解和学习Android UI设计，特别是图片展示和滚动效果的处理，具有很高的参考价值。 首先，瀑布...
CSS3版本的图片瀑布流可很好的应用于手机APP中，当然本示例是在PC端，两者均有很好的表现。 本瀑布流布局同时还带有图片预览功能，当用户随意单击瀑布流中的任意图片时，图片渐变放大显示，单击图片右上角的关闭...
通过分析和研究"VC++ api hook 源码 带示例"，你可以深入理解API Hook的工作原理，掌握在VC++环境中如何实现和应用这一技术，为你的软件开发添加更多可能性。同时，也要注意使用API Hook时要尊重用户隐私和系统稳定...
"SuperSocketClient"文件则是客户端的示例源码，它展示了如何建立与服务器的连接、发送自定义命令以及接收服务器响应。客户端代码通常包括连接服务器、构造并发送数据、处理来自服务器的响应以及断开连接等步骤。这...
Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
JavaSLG游戏开发入门示例及其源码（源码在jar内）