基于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图片自适应排列显示代码的更多相关文章

  1. 基于jQuery实现文字倾斜显示代码

    这是一款基于jQuery实现文字倾斜显示,这是一款基于jQuery实现的超酷动态文字显示效果.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. ...

  2. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  3. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 基于jQuery图片元素网格布局插件

    基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览   源码下载 实现的代码. html代码: <c ...

  5. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  6. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

  7. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery瀑布流排列样式代码

    <!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...

  9. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

随机推荐

  1. 【Spring】Spring之浅析Spring框架的搭建

    Spring是什么 Spring是一个开源的容器框架,用于配置bean并且维护bean之间关系的.其主要的思想就是IOC(Inversion Of Control,控制反转)或者称作DI(Depend ...

  2. spring 使用注解注入 list 或 map

    1.定义一个接口或抽象类AClass 2.定义两个类实现或继承AClass,(BClass,MClass) 3.在第三个类XClass 中注入List 形如: @Autowired private L ...

  3. MySQLFabric概述

    Oracle在2014年5月推出了一套为各方寄予厚望的MySQL产品 -- MySQL Fabric,从字面上不太能看出它是啥,但是从名称上还是有迹可循的.fabric是“织物”的意思,这意味着它是用 ...

  4. aaronyang的百度地图API之LBS云与.NET开发 Javascript API 2.0【把数据存到LBS云1/2】

    如何让用户点,我们可以获得经纬度,我们就要先了解下它给我们提供的百度地图的事件 主要有两个操作事件的,绑定(addEventListener)和解绑(removeEventListener) 一些事件 ...

  5. C++虚函数工作原理

    一.虚函数的工作原理      虚函数的实现要求对象携带额外的信息,这些信息用于在运行时确定该对象应该调用哪一个虚函数.典型情况下,这一信息具有一种被称为 vptr(virtual table poi ...

  6. git经常使用命令和问题

    和远程仓库相关的命令: 下载仓库代码:git clone 远程仓库地址 查看远程仓库:git remote -v 加入远程仓库:git remote add origin [url], 当中origi ...

  7. Python 文件 isatty() 方法

    概述 Python 文件 isatty() 方法检测文件是否连接到一个终端设备,如果是返回 True,否则返回 False. 语法 isatty() 方法语法如下: fileObject.isatty ...

  8. 转 分享我在阿里工作十年接触过Java框架设计模式

    转 原文: 分享我在阿里工作十年接触过Java框架设计模式 一.前言 说起来设计模式,大家应该都耳熟能详,设计模式代表了软件设计的最佳实践,是经过不断总结提炼出来的代码设计经验的分类总结,这些模式或者 ...

  9. flowable 中task的相关操作

    1 获取任务列表 1)获取候选人的任务列表 TaskService taskService = processEngine.getTaskService(); List<Task> tas ...

  10. Python 实现进程间通信(网络编程)

    [网络编程] 1):网络编程是什么意思,网络编程指的是不同机器之间通过网编相互发信息,我们常用的“QQ”,“微信”,“邮箱” 都个网编编程的应用: 网编编程在技术上还有另一个叫法叫“进程间通信”,进程 ...