很流行的瀑布流展示
并且当鼠标悬浮 旋转图片 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/
相关推荐
接着，"瀑布流源码说明.txt"文件很可能是对实现瀑布流布局的代码进行的详细解释。瀑布流布局的实现通常涉及到JavaScript，尤其是jQuery库或者现代浏览器的CSS3特性。它可能包含以下关键点： 1. **HTML结构**：通常...
回到我们的实例源码Demo_recyclerview，这个示例包含了如何在RecyclerView中实现瀑布流布局的全过程。首先，我们需要导入必要的库，包括RecyclerView和StaggeredGridLayoutManager。然后，在Activity中初始化...
瀑布流ListView，也被称为WaterFall或Infinite Scroll，是一种在Android平台上常见的布局方式，尤其适用于展示图片或商品信息。这种布局模拟了瀑布下落的效果，每一行的高度根据内容自适应，使得界面更具视觉吸引力...
【标题】"IOS应用源码Demo-类似于Pinterest的瀑布墙图片展示demo-毕设学习.zip"揭示了这个压缩包中的核心内容，即一个基于iOS平台的源代码示例项目，该示例模仿了Pinterest的瀑布流图片展示效果。在iOS应用开发中，...
本DEMO提供的瀑布流源码，就是为了让开发者能够直接查看并理解瀑布流布局在Android上的实现细节。 【瀑布流DEMO】 这个DEMO展示了如何在Android应用中实现瀑布流布局。核心组件可能包括RecyclerView（一个可滚动的...
这个"Activiti工作流示例Activiti Demo"提供了完整的源代码，帮助开发者深入理解并实际操作Activiti，从而更好地在自己的项目中应用。 在描述中提到的"Canvas动画"是指Activiti提供的可视化建模工具，它允许开发者...
"全套EasyUI示例源码"是一个包含三十多个组件的完整示例集合，可以帮助开发者深入理解和使用EasyUI。 1. **EasyUI组件介绍** - **布局组件**：如面板（panel）、窗口（window）、对话框（dialog）、分页...
瀑布流布局，又称Masonry布局，是iOS应用中一种常见的展示大量内容的布局方式，尤其在图片、商品展示等场景中十分流行。这种布局模仿了瀑布流动的效果，使得屏幕空间得以充分利用，每行元素的高度不固定，根据内容...
【uniapp项目源码示例房源系统】是一个基于uniapp框架构建的应用程序，主要用于演示和学习如何在房地产领域创建一个房源管理系统。uniapp是一个多端开发框架，它允许开发者使用一套代码来构建iOS、Android、Web、小...
**Three.js 源码与 Demo 示例详解** Three.js 是一款基于 WebGL 的开源 JavaScript 库，专门用于在 Web 上创建和展示三维图形。这个库以其轻量级、易用性和强大的功能而广受开发者喜爱。它封装了 WebGL 的复杂性，...
这个压缩包“Android应用源码瀑布流实现，类似于蘑菇街和迷尚应用里的排列”提供了一个实现此类布局的示例源码，对于理解和学习Android UI设计，特别是图片展示和滚动效果的处理，具有很高的参考价值。 首先，瀑布...
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工作流引擎的核心概念。...
微信小程序开发入门到精通经典图文教程带很多源码示例，入门学习必备教程，绝对物超所值，如果想进阶请下载小程序应用-微信小程序开发实战精典图文带后台案例解析教程，微信小程序简称小程序，英文名Mini Program，...
大中型的实用项目中，多人协作开发，除了分层次目录存放源码，还要考虑源码权限，自动化的编译方案。linux下开发，makefile树，是一种常用方案。本资源是一个项目目录树和makefile树的简单示例。具体说明参考：...