注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery创建类似谷歌图片流插件flexImages

UI fishcity 2129浏览

jquery图片流fleximages

flexImages是一款轻量级的jquery插件,它可轻松的创出类似谷歌图片流效果。当然,flexImages可以实现多种模式的排列,排列的对象不限于图片,可以是文本,视频等,排列中也可以显示标题,标题可以显示在图片上,也可以显示在图片下方。更多的详情可参考实例。

特点:

轻量级:1.2 kB的JavaScript,小于0.6 kB gzip

可以有任何大小的源图像/对象

不仅仅适用于图像,也可以适用于如视频、iframes和纯文本

响应式

通过CSS控制平等的图像边距

没有裁剪或重新排序

内置AJAX功能,例如无限滚动

支持延迟加载图片和iframe的内容

选项控制布局,如 maximum按制最大行数。

jquery实例:flexImages使用方法

引入核心文件

<link rel="stylesheet" href="jquery.flex-images.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.flex-images.js"></script>

构建html

<div class="flex-images">
    <div class="item" data-w="200" data-h="150"><img src="http://www.jqcool.net/200/150/?1"></div>
    <div class="item" data-w="250" data-h="150"><img src="http://www.jqcool.net/250/150/?2"></div>
    <div class="item" data-w="150" data-h="150"><img src="http://www.jqcool.net/150/150/?3"></div>
    <div class="item" data-w="150" data-h="150"><img src="http://www.jqcool.net/150/150/?4"></div>
    <div class="item" data-w="200" data-h="150"><img src="http://www.jqcool.net/200/150/?5"></div>
    <div class="item" data-w="100" data-h="150"><img src="http://www.jqcool.net/100/150/?6"></div>
    <div class="item" data-w="180" data-h="150"><img src="http://www.jqcool.net/180/150/?7"></div>
    <div class="item" data-w="185" data-h="150"><img src="http://www.jqcool.net/185/150/?8"></div>
    <div class="item" data-w="350" data-h="150"><img src="http://www.jqcool.net/350/150/?9"></div>
    <div class="item" data-w="200" data-h="150"><img src="http://www.jqcool.net/200/150/?10"></div>
    <div class="item" data-w="165" data-h="150"><img src="http://www.jqcool.net/165/150/?11"></div>
    <div class="item" data-w="150" data-h="150"><img src="http://www.jqcool.net/150/150/?12"></div>
    <div class="item" data-w="120" data-h="150"><img src="http://www.jqcool.net/120/150/?13"></div>
    <div class="item" data-w="120" data-h="150"><img src="http://www.jqcool.net/120/150/?14"></div>
    <div class="item" data-w="140" data-h="150"><img src="http://www.jqcool.net/140/150/?15"></div>
    <div class="item" data-w="200" data-h="150"><img src="http://www.jqcool.net/200/150/?16"></div>
    <div class="item" data-w="170" data-h="150"><img src="http://www.jqcool.net/170/150/?17"></div>
</div>

写入JS初始化

$('.flex-images').flexImages({rowHeight: 140});

选项

名称 默认值 描述
container '.item' 包含图片或对象的容器的选择器,如ID,CLASS
object 'img' 容器内的图片或是对象的选对器
rowHeight 180 行的最大高度
maxRows null 最大显示行数. 如果超出则隐藏
truncate false 最后一行不完整时是否隐藏

转载请注明:jQ酷 » jquery创建类似谷歌图片流插件flexImages

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。