基于jQuery图片自适应排列显示代码
基于jQuery图片自适应排列显示代码。这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果。效果图如下：
实现的代码。
html代码：
<div style="max-width:900px;margin:auto;padding:0 10px">
<h3>演示样式一</h3>
</div> <div style="max-width:908px;margin:auto;padding:0 10px 10px">
<div id="demo1" class="flex-images">
<div class="item" data-w="219" data-h="180"><img src="data:images/1.jpg"></div>
<div class="item" data-w="279" data-h="180"><img src="data:images/2.jpg"></div>
<div class="item" data-w="270" data-h="180"><img src="data:images/3.jpg"></div>
<div class="item" data-w="270" data-h="180"><img src="data:images/4.jpg"></div>
<div class="item" data-w="147" data-h="180"><img src="data:images/5.jpg"></div>
<div class="item" data-w="276" data-h="180"><img src="data:images/6.jpg"></div>
<div class="item" data-w="319" data-h="180"><img src="data:images/7.jpg"></div>
<div class="item" data-w="270" data-h="180"><img src="data:images/8.jpg"></div>
<div class="item" data-w="240" data-h="180"><img src="data:images/9.jpg"></div>
<div class="item" data-w="270" data-h="180"><img src="data:images/10.jpg"></div>
<div class="item" data-w="240" data-h="180"><img src="data:images/11.jpg"></div>
<div class="item" data-w="270" data-h="180"><img src="data:images/12.jpg"></div>
<div class="item" data-w="283" data-h="180"><img src="data:images/13.jpg"></div>
<div class="item" data-w="271" data-h="180"><img src="data:images/14.jpg"></div>
<div class="item" data-w="258" data-h="180"><img src="data:images/15.jpg"></div>
</div>
</div> <div style="max-width:900px;margin:auto;padding:0 10px 50px"> <h3>演示样式二</h3>
<div id="demo2" class="flex-images">
<div class="item" data-w="219" data-h="180"><img src="blank.gif" data-src="data:images/1.jpg"></div>
<div class="item" data-w="279" data-h="180"><img src="blank.gif" data-src="data:images/2.jpg"></div>
<div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="data:images/3.jpg"></div>
<div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="data:images/4.jpg"></div>
<div class="item" data-w="147" data-h="180"><img src="blank.gif" data-src="data:images/5.jpg"></div>
<div class="item" data-w="276" data-h="180"><img src="blank.gif" data-src="data:images/6.jpg"></div>
<div class="item" data-w="319" data-h="180"><img src="blank.gif" data-src="data:images/7.jpg"></div>
<div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="data:images/8.jpg"></div>
<div class="item" data-w="240" data-h="180"><img src="blank.gif" data-src="data:images/9.jpg"></div>
<div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="data:images/10.jpg"></div>
<div class="item" data-w="240" data-h="180"><img src="blank.gif" data-src="data:images/11.jpg"></div>
</div> <p style="margin:60px 0 8px">演示样式三</p>
<div id="demo4" class="flex-images">
<div class="item" data-w="219" data-h="197">
<div class="img"><img src="blank.gif" data-src="data:images/1.jpg"></div>
<div class="bottom">Caption 1</div>
</div>
<div class="item" data-w="279" data-h="197">
<div class="img"><img src="blank.gif" data-src="data:images/2.jpg"></div>
<div class="bottom">Caption 2</div>
</div>
<div class="item" data-w="270" data-h="197">
<div class="img"><img src="blank.gif" data-src="data:images/3.jpg"></div>
<div class="bottom">Caption 3</div>
</div>
<div class="item" data-w="270" data-h="197">
<div class="img"><img src="blank.gif" data-src="data:images/4.jpg"></div>
<div class="bottom">Caption 4</div>
</div>
<div class="item" data-w="147" data-h="197">
<div class="img"><img src="blank.gif" data-src="data:images/5.jpg"></div>
<div class="bottom">Caption 5</div>
</div>
</div> <p style="margin:60px 0 8px">演示样式四</p>
<div id="demo5" class="flex-images">
<div class="item" data-w="219" data-h="180">
<img src="blank.gif" data-src="data:images/1.jpg">
<div class="over">Caption 1</div>
</div>
<div class="item" data-w="279" data-h="180">
<img src="blank.gif" data-src="data:images/2.jpg">
<div class="over">Caption 2</div>
</div>
<div class="item" data-w="270" data-h="180">
<img src="blank.gif" data-src="data:images/3.jpg">
<div class="over">Caption 3</div>
</div>
<div class="item" data-w="270" data-h="180">
<img src="blank.gif" data-src="data:images/4.jpg">
<div class="over">Caption 4</div>
</div>
<div class="item" data-w="147" data-h="180">
<img src="blank.gif" data-src="data:images/5.jpg">
<div class="over">Caption 5</div>
</div>
</div> <p style="margin:60px 0 8px">演示样式五</p>
<div id="demo6" class="flex-images">
<div class="item" data-w="450" data-h="300">
<a target="_blank" href="http://sc.chinaz.com">
<img src="data:images/1.jpg">
</a>
</div>
<div class="item" data-w="450" data-h="437">
<a target="_blank" href="http://sc.chinaz.com">
<img src="data:images/2.jpg">
</a>
</div>
<div class="item" data-w="450" data-h="300">
<a target="_blank" href="http://sc.chinaz.com">
<img src="data:images/3.jpg">
</a>
</div>
<div class="item" data-w="450" data-h="298">
<a target="_blank" href="http://sc.chinaz.com">
<img src="data:images/4.jpg">
</a>
</div>
</div>
<p style="margin:15px 0 5px">演示样式六</p>
<div>
<img style="max-width:100%" src="data:images/1.jpg">
</div> </div>
via：http://www.w2bc.com/Article/44440
基于jQuery图片自适应排列显示代码的更多相关文章
- 基于jQuery实现文字倾斜显示代码
这是一款基于jQuery实现文字倾斜显示,这是一款基于jQuery实现的超酷动态文字显示效果.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. ...
- 基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代 ...
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery图片元素网格布局插件
基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览 源码下载 实现的代码. html代码: <c ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 基于jQuery右下角旋转环状菜单代码
基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery瀑布流排列样式代码
<!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...
- 基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul class="ce&q ...
随机推荐
- 【java】自定义异常类
目录结构: contents structure [+] 为什么需要自定义异常类 自定义异常的方式 实例 日常日志 一,为什么需要自定义异常类 当java中的异常类型没有能够满足我们所需的异常的时候就 ...
- ASP.NET车辆管理系统
原文地址:https://blog.csdn.net/lisenyang/article/details/46606181 系统开发环境为VS2010,采用ASP.NET框架,数据库采用SQL Ser ...
- numpy 中的axis轴问题
在numpy库中,axis轴的问题比较重要,不同的值会得到不同的结果,为了便于理解,特此将自己的理解进行梳理 为了梳理axis,借助于sum函数进行! a = np.arange(27).reshap ...
- Html5 reset表 2015年1月7日15:02:14
/* HTML5 Reset :: style.css ---------------------------------------------------------- We have learn ...
- 安卓listview滚动时背景变黑的解决方法
ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景图片,或者背景颜色时,滚动时listView会黑掉, 原因是,滚动时,列表里面的view重绘时,用的依 ...
- [转]Greenplum 资源隔离的原理与源码分析
摘要: 背景 Greenplum是一个MPP的数据仓库系统,最大的优点是水平扩展,并且一个QUERY就能将硬件资源的能力发挥到极致. 但这也是被一些用户诟病的一点,因为一个的QUERY就可能占光所有的 ...
- word中公式居中编号在最右端
1 显示标尺 2 设置居中制表符 3 在对应位置做标记 首先让公式居中 使用居中制表符在标尺的灰色地带标记位置,1)标记公式位置,鼠标左击 2)标记右边标号位置,注意和右边留有一定边距 4 公式左对齐 ...
- WEB服务器搭建–IIS
功能作用 IIS是一个World Wide Web server.Gopher server和FTP server全部包容在里面. IIS意味着你能发布网页,并且有ASP(Active Server ...
- MySQL通过Explain查看select语句的执行计划结果触发写操作
[背景] 某某同学执行了一下Explain结果结果发现数据库有了一条写入操作,恭喜这位同学你的锅到货了,你签收一下: 对! 你没有听错,在一种场景下就算是Explain也会引发数据的写操作,就这是外层 ...
- CommonView for wifi抓包破解WPA无线网络
运行环境:win8 64位+intel 5100n网卡 步骤1:下载CommonView完全破解版,非破解版只有跑10分钟 http://www.nlver.cn/soft/7305.html 步骤2 ...