瀑布流展示示例- 带旋转的图文展示 好东西与大家分享 附源码

最新推荐文章于 2024-07-25 08:00:00 发布
最新推荐文章于 2024-07-25 08:00:00 发布
阅读量141 收藏
点赞数
分类专栏： JavaScript/Jquery 文章标签： jquery js html .net 瀑布流 ViewUI

 

很流行的瀑布流展示

 

并且当鼠标悬浮 旋转图片 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&amp;byline=0&amp;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/

 

 

fengqingxin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Lychee一个外观漂亮且易于使用的照片管理系统
08-08
Lychee 一个外观漂亮且易于使用的照片管理系统
kanbanflow
扶正眼镜，继续继续
09-10 1157
一款不错的任务管理工具，自带番茄时钟，网页版地址：https://kanbanflow.com。 还可以在手机上使用，方法是： 在Google浏览器中打开网址：kanbanflow.com/m, 浏览器右上角（三个点），点开可以看到有个选项"添加到主屏幕"，点击后，在手机上就会有kanbanflow的快捷键，以后就可以很方便的使用手机操作了。 【注】如果选择"添加到主屏幕"后，发现屏幕上...
瀑布流展示示例- 带旋转的图文展示 好东西与大家分享 附
04-12
在本示例中，我们将探讨如何实现一个带旋转的图文瀑布流展示，这通常用于网站上的商品展示、博客文章或者图片分享平台。 瀑布流的核心特性在于其自适应和动态加载。自适应意味着布局会根据浏览器窗口大小的变化自动...
RecyclerView 瀑布流、ListView、GridView实例源码
04-15
回到我们的实例源码Demo_recyclerview，这个示例包含了如何在RecyclerView中实现瀑布流布局的全过程。首先，我们需要导入必要的库，包括RecyclerView和StaggeredGridLayoutManager。然后，在Activity中初始化...
Activiti工作流示例Activiti Demo（带完整源码）非常实用
02-16
这个"Activiti工作流示例Activiti Demo"提供了完整的源代码，帮助开发者深入理解并实际操作Activiti，从而更好地在自己的项目中应用。 在描述中提到的"Canvas动画"是指Activiti提供的可视化建模工具，它允许开发者...
瀑布流ListView源码
10-06
瀑布流ListView，也被称为WaterFall或Infinite Scroll，是一种在Android平台上常见的布局方式，尤其适用于展示图片或商品信息。这种布局模拟了瀑布下落的效果，每一行的高度根据内容自适应，使得界面更具视觉吸引力...
微信公众平台java开发完整项目示例程序源码---图灵机器人 微信智能回复
08-21
本例中列出了微信公众平台开发的所有流程的代码，包括接收xml数据、解析xml数据、调用图灵机器人api接口获取智能回复内容、封装结果xml数据等，简单明了，不明之处可查看个人博客中的讲解。
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1036
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML常见标签——超链接a标签
weixin_64294248的博客
07-23 701
a>标签用于做跳转、导航，是双标签，记作，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。
前端开发知识(一)-html
modi000的博客
07-24 596
2.前端开发的三剑客：html、css、javascript。Element（饿了么开发的） ：前端组件库。Vue可以简化JavaScpript流程。Ngix：前端服务器。
.NET 中的高性能队列 Channel
学习和分享
07-25 927
在 .NET 中，Channel类是 .NET Core 3.0 引入的一个用于实现生产者-消费者场景的高性能队列。它属于命名空间，并提供了基于通道的通信机制，使得在不同线程或任务之间传递数据变得更加简单和高效。
mpu6050陀螺仪使用方法开发教程文档.docx
07-30
mpu6050陀螺仪使用方法
【SCI顶级】龙格库塔算法RUN-CNN-LSTM-Multihead-Attention温度预测【含源码 5747期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
大模型的数学之魂：统计学习理论精要
07-30
大型机器学习模型，通常简称为“大模型”，是指具有数十亿甚至数千亿参数的深度神经网络模型。这些模型因为其庞大的参数量和复杂的计算结构，能够处理非常复杂的任务和数据，展现出强大的表达能力和预测性能。大模型在自然语言处理、计算机视觉、语音识别和推荐系统等多个领域都有广泛的应用。 大模型的设计目的是通过训练海量数据来学习复杂的模式和特征，从而具备强大的泛化能力，能够对未见过的数据做出准确的预测。与参数较少、层数较浅的小模型相比，大模型虽然需要更多的计算资源和时间来训练和推理，但它们展现出了一种被称为“涌现能力”的特性，即从原始训练数据中自动学习并发现新的、更高层次的特征和模式。 大模型的发展历程可以分为几个阶段，从早期的卷积神经网络模型发展到以Transformer为代表的全新神经网络模型，再到当前以GPT为代表的预训练大模型阶段。Transformer架构因其自注意力机制而成为大模型的核心技术，它使得模型能够更好地理解和处理文本数据中的长距离依赖关系。 大模型的分类主要包括语言大模型（NLP）、视觉大模型（CV）和多模态大模型。语言大模型专注于处理文本数据和理解自然语言，而视觉大模型用
唯美淡雅四页.zip
最新发布
07-30
【简历模板】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
仿真验证阵列可以提高接收信号信噪比
07-30
这是一份模拟了阵列输入信号及噪声，并验证了相对于阵列接收到的信号，阵列输出信号可以将信噪比提高M倍，其中M为阵列的阵元个数的代码。 代码中可以随意修改阵元个数、阵元间距、波束指向角度、信号频率等。 代码中关键部分均含有文字注释，完全不必担心看不懂。 无论是从仿真波形，还是计算的信噪比结果均能看出阵元数为M的阵列将信号的信噪比提高了M倍。
[毕业设计]Java驱动的C语言编程练习与考试平台(源代码+论文).zip
07-30
[毕业设计]Java驱动的C语言编程练习与考试平台(源代码+论文)
基于Qt的多线程局域网聊天系统（含客户端+服务端）.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
iperf3可测量丢包率
07-30
测吞吐量和丢包率
Python程序设计：源码解析与实战示例
"这是《Python程序设计》一书的程序源码，由黄锐军编著。书中详细介绍了Python编程的基础知识，包括程序语句、数据类型等，并提供了丰富的示例代码，帮助读者深入理解Python编程。” 在《Python程序设计》中，作者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值