- jQuery 教程
- jQuery - 主页
- jQuery - 概述
- jQuery - 基础知识
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery-AJAX
- jQuery DOM 操作
- jQuery-DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链接
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先
- jQuery - 遍历后代
- jQuery用户界面
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 实用程序
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery-Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问题与解答
- jQuery - 快速指南
- jQuery - 有用的资源
- jQuery - 讨论
jQuery - Rowgrid.js
Rowgrid.js 是一个用于连续显示图像的 jQuery 插件。
一个简单的 rowgrid 示例如下所示 -
<!doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <style> .container:before, .container:after { content: ""; display: table; } .container:after { clear: both; } .item { float: left; margin-bottom: 15px; } .item img { max-width: 100%; max-height: 100%; vertical-align: bottom; } .first-item { clear: both; } .last-row, .last-row ~ .item { margin-bottom: 0; } </style> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script> <script src = "/jquery/src/rowgrid/jquery.row-grid.js"> </script> <script> $(document).ready(function(){ $(".container").rowGrid({itemSelector: ".item", minMargin: 10, maxMargin: 25, firstItemClass: "first-item"}); }); </script> </head> <body> <!-- Items with example images --> <div class = "container"> <div class = "item"> <img src = "https://www.tutorialspoint.com/images/75-logo.jpg" width = "220" height = "200" /> </div> <div class = "item"> <img src = "https://www.tutorialspoint.com/images/absolute-classes-free.jpg" width = "180" height = "200" /> </div> <div class = "item"> <img src = "https://www.tutorialspoint.com/images/absolute-classes-latest-technologies.jpg" width = "250" height = "200" /> </div> <div class = "item"> <img src = "https://www.tutorialspoint.com/images/absolute-classes.jpg" width = "200" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/240/200?5" width = "240" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/210/200?6" width = "210" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/260/200?21" width = "260" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/220/200?22" width = "220" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/220/200?1" width = "220" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/180/200?2" width = "180" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/250/200?3" width = "250" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/200/200?4" width = "200" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/240/200?5" width = "240" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/210/200?6" width = "210" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/200/200?7" width = "200" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/190/200?8" width = "190" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/260/200?9" width = "260" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/220/200?10" width = "220" height = "200" /> </div> </div> </body> </html>
这应该产生以下结果 -
点击这里