基于jQuery图片自适应排列显示代码
2023-09-27 14:28:19 时间
基于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="images/1.jpg"></div> <div class="item" data-w="279" data-h="180"><img src="images/2.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="images/3.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="images/4.jpg"></div> <div class="item" data-w="147" data-h="180"><img src="images/5.jpg"></div> <div class="item" data-w="276" data-h="180"><img src="images/6.jpg"></div> <div class="item" data-w="319" data-h="180"><img src="images/7.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="images/8.jpg"></div> <div class="item" data-w="240" data-h="180"><img src="images/9.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="images/10.jpg"></div> <div class="item" data-w="240" data-h="180"><img src="images/11.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="images/12.jpg"></div> <div class="item" data-w="283" data-h="180"><img src="images/13.jpg"></div> <div class="item" data-w="271" data-h="180"><img src="images/14.jpg"></div> <div class="item" data-w="258" data-h="180"><img src="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="images/1.jpg"></div> <div class="item" data-w="279" data-h="180"><img src="blank.gif" data-src="images/2.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/3.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/4.jpg"></div> <div class="item" data-w="147" data-h="180"><img src="blank.gif" data-src="images/5.jpg"></div> <div class="item" data-w="276" data-h="180"><img src="blank.gif" data-src="images/6.jpg"></div> <div class="item" data-w="319" data-h="180"><img src="blank.gif" data-src="images/7.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/8.jpg"></div> <div class="item" data-w="240" data-h="180"><img src="blank.gif" data-src="images/9.jpg"></div> <div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/10.jpg"></div> <div class="item" data-w="240" data-h="180"><img src="blank.gif" data-src="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="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="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="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="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="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="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="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="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="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="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="images/1.jpg"> </a> </div> <div class="item" data-w="450" data-h="437"> <a target="_blank" href="http://sc.chinaz.com"> <img src="images/2.jpg"> </a> </div> <div class="item" data-w="450" data-h="300"> <a target="_blank" href="http://sc.chinaz.com"> <img src="images/3.jpg"> </a> </div> <div class="item" data-w="450" data-h="298"> <a target="_blank" href="http://sc.chinaz.com"> <img src="images/4.jpg"> </a> </div> </div> <p style="margin:15px 0 5px">演示样式六</p> <div> <img style="max-width:100%" src="images/1.jpg"> </div> </div>
相关文章
- jquery layout学习
- [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果
- jquery $.proxy使用 Jquery实现ready()的源码
- 文字无缝滚动jQuery上下滚动js效果代码
- Js和Jquery中ajax返回JSON格式的两种方法!(各有示例代码)
- Jquery中把一段html代码动态写入到DIV中(简单实例)
- JQuery入门(6)
- Jquery - Select 和 Checkbox 、Textarea的操作
- 《众妙之门——JavaScript与jQuery技术精粹》——1.8 特定于浏览器的代码就是浪费时间,试试库文件
- 《众妙之门——JavaScript与jQuery技术精粹》——2.4 进行代码复查的人员需要提供的信息
- Android+Jquery Mobile学习系列(9)-总结和代码分享
- jquery 2.0.3代码结构
- jquery+ajax实现下拉刷新+上拉加载
- jQuery实现下拉加载更多数据代码实现
- jQuery中json中关于带有html代码网页的处理
- jquery-1.10.2 获取checkbox的checked属性总是undefined
- jquery-ui日期时间控件实现
- VS CODE jQuery/easyui代码片段
- JQuery判断input是否被禁用
- jQuery随机抽取数字号代码
- 最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回
- jQuery与GridView控件结合示例