瀑布流这个概念一直不是很理解，看到别人可以实现，自己弄了很久还是不能实现就很纠结。瀑布流这根刺就一直扎在我心里，一次偶然的机会看到别人实现了瀑布流，我想我是不是也应该再继续把这个未完成的任务画一个圆满符号？所以坚持加上强迫自己好好思考，这里引用了别人瀑布流的图片（ps：没有去看实现方法，那些js代码看着晕乎乎的，没jquery简单，@_@）。

　　在这里我采用了我认为简单的方法实现它，可能还有很多问题，希望大家能积极指正，谢谢~ O(∩_∩)O。

一、css代码

            .box-inner {

                position: relative;

                width: 1800px;

                margin: 50px auto;

                background: red;

            }

            .box-inner ul li {

                position: absolute;

                padding-bottom: 10px;

                border: 2px solid gray;

                text-align: center;

            }

二、html代码

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <script type="text/javascript" src="../jquery-1.10.2.js"></script>

        <link rel="stylesheet" href="../reset.css"/>

    </head>

    <body>

        <div class="box">

            <div class="box-inner">

                <ul>

                    <li><img src="data:images/image_1.jpg"/><p>1</p></li>

                    <li><img src="data:images/image_2.jpg"/><p>2</p></li>

                    <li><img src="data:images/image_3.jpg"/><p>3</p></li>

                    <li><img src="data:images/image_4.jpg"/><p>4</p></li>

                    <li><img src="data:images/image_5.jpg"/><p>5</p></li>

                    <li><img src="data:images/image_6.jpg"/><p>6</p></li>

                    <li><img src="data:images/image_7.jpg"/><p>7</p></li>

                    <li><img src="data:images/image_8.jpg"/><p>8</p></li>

                    <li><img src="data:images/image_9.jpg"/><p>9</p></li>

                    <li><img src="data:images/image_10.jpg"/><p>10</p></li>

                    <li><img src="data:images/image_1.jpg"/><p>11</p></li>

                    <li><img src="data:images/image_2.jpg"/><p>12</p></li>

                    <li><img src="data:images/image_3.jpg"/><p>13</p></li>

                    <li><img src="data:images/image_4.jpg"/><p>14</p></li>

                    <li><img src="data:images/image_5.jpg"/><p>15</p></li>

                    <li><img src="data:images/image_6.jpg"/><p>16</p></li>

                    <li><img src="data:images/image_7.jpg"/><p>17</p></li>

                    <li><img src="data:images/image_8.jpg"/><p>18</p></li>

                    <li><img src="data:images/image_9.jpg"/><p>19</p></li>

                    <li><img src="data:images/image_10.jpg"/><p>20</p></li>

                    <li><img src="data:images/image_1.jpg"/><p>21</p></li>

                    <li><img src="data:images/image_2.jpg"/><p>22</p></li>

                    <li><img src="data:images/image_3.jpg"/><p>23</p></li>

                    <li><img src="data:images/image_4.jpg"/><p>24</p></li>

                    <li><img src="data:images/image_5.jpg"/><p>25</p></li>

                </ul>

            </div>

        </div>

    </body>

</html>

三、jquery代码

$(function(){

                var i = 0;

                var next = 0;

                $(".box-inner ul li").each(function(){

                    var width = $(this).width();

                    var allWidth = width*i;/* 表示所有图片总宽度 */

                    if(allWidth<1800){/* 表示为第一行 */

                        var cssObj = {"left":allWidth};

                        $(this).css(cssObj);

                        i++;

                        next = i;/* 将i值赋给next，当换行时next一行总数就保持不变了 */

                    }else{

                        /* 这边获取到的next就是每行总个数 */

                        var height = $(".box-inner ul li").eq(i-next).height()+$(".box-inner ul li").eq(i-next).offset().top-$(".box-inner").offset().top;/* 图片上一行对应地方的高度加上它上面偏移top减去box-inner偏移高度 */

                        var newLineWidth = width*(i%next);/* 每一行显示宽度的形式都是一样的，i整除next的值是0,1,2,... */

                        var otherObj = {"left":newLineWidth,"top":height};

                        $(this).css(otherObj);

                        i++;

                    }

                });

});

jquery实现简单瀑布流的更多相关文章

  1. jquery实现简单瀑布流代码

    测试环境:ie8 ff13.0.1  chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 <!DOCTYP ...

  2. Jquery实现图片瀑布流思路-简单版

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  3. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  4. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  5. jQuery无限载入瀑布流 【转载】

    转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较 ...

  6. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  7. iOS之简单瀑布流的实现

    iOS之简单瀑布流的实现   前言 超简单的瀑布流实现,这里说一下笔者的思路,详细代码在这里. 实现思路 collectionView能实现各中吊炸天的布局,其精髓就在于UICollectionVie ...

  8. jquery插件实现瀑布流

    jquery插件实现瀑布流<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  9. jQuery淡入淡出瀑布流效果

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

随机推荐

  1. Java语言主要特点有哪些？

    1.简单 Java最初是为对家用电器进行集成控制而设计的一种语言,因此它必须简单明了.Java语言的简单性主要体现在以下三个方面: 1) Java的风格类似于C++,因而C++程序员是非常熟悉的.从某 ...

  2. Linux启动流程【转载】

    探讨操作系统接管硬件以后发生的事情,也就是操作系统的启动流程. 这个部分比较有意思.因为在BIOS阶段,计算机的行为基本上被写死了,程序员可以做的事情并不多:但是,一旦进入操作系统,程序员几乎可以定制 ...

  3. Eclipse修改tomcat初始分配空间参数

    正常启动tomcat后,运行报java.lang.OutOfMemoryError: PermGen space,查阅是tomcat内存溢出,也就是分配给tomcat的永久内存小了点 在Eclipse ...

  4. 关于IP4上WIFI设置静态IP的一点经验

    一开始我设置IP4的WIFI的"静态"IP地址后,又查看了一下"BootP"或者"DHCP"选项,然后保存退出(关键错误,后有说明),再进W ...

  5. ROS 禁止公网暴力破解SSH FTP

    最简单的彻底禁止公网访问SSH FTP端口 1 2 /ip firewall filter add chain=input protocol=tcp dst-port=21-22 src-addres ...

  6. 使用net.sf.fjep.fatjar插件将第三方JAR包打包进自已的JAR包中

    一般单个工程,在没有应用别人的jar包时导出为jar很简单,只要设置一个Main-Class就行了,也就是选择程序入口(main所在类).但是涉及到了数据库或需要用到第三方的JAR,就需要用到相应的数 ...

  7. MySQL数据库篇之单表查询

    主要内容: 一.单表查询的语法 二.关键字的执行优先级 三.简单查询 四.where约束 五.分组查询 group by 六.having过滤 七.查询排序 order by 八.限制查询的记录数 l ...

  8. 10 华电内部文档搜索系统 search04

    上一节我们着重讲解了权限过滤器的使用.这一节讲解一下补充一下Struts 2下面对应的Checkbox的使用.对索引下面的数据进行维护操作,一次可以删除多个.在Struts 2下面使用对应的Check ...

  9. Spark 性能相关参数配置详解－任务调度篇

    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化. 由于篇 ...

  10. java程序员应该熟悉的20个有用的库(转)

    优秀且经验丰富的Java开发人员的一个特点是API的广泛知识,包括JDK和第三方库.我花了很多时间学习API,特别是在阅读Effective Java 3rd Edition之后,Joshua Blo ...