1、首先，自己写好图片路径，引入jquery

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            * {

                padding: 0;

                margin: 0;

            }

            ul {

                position: relative;

                width: 860px;

                margin: 0 auto;

                border: 1px solid yellowgreen;

            }

            li {

                width: 200px;

                position: absolute;

                list-style: none;

            }

            img {

                width: 100%;

                border-radius: 8px;

            }

        </style>

    </head>

    <body>

        <ul>

            <li><img src="img/1.jpg" /></li>

            <li><img src="img/2.jpg" /></li>

            <li><img src="img/3.jpg" /></li>

            <li><img src="img/4.jpg" /></li>

            <li><img src="img/5.jpg" /></li>

            <li><img src="img/6.jpg" /></li>

            <li><img src="img/7.jpg" /></li>

            <li><img src="img/8.jpg" /></li>

            <li><img src="img/9.jpg" /></li>

            <li><img src="img/10.jpg" /></li>

            <li><img src="img/2.jpg" /></li>

            <li><img src="img/3.jpg" /></li>

            <li><img src="img/4.jpg" /></li>

            <li><img src="img/5.jpg" /></li>

            <li><img src="img/6.jpg" /></li>

            <li><img src="img/7.jpg" /></li>

        </ul>

    </body>

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

    <script type="text/javascript">

        $(function() {

            lazyLoad("ul", "li", 4, 20, 40).init();

            /*

            wrap:外层的dom

            box:瀑布流的dom

            clonum:列数 ，默认为3行

            marginLeft：每列，间隔，默认为20

            marginBottom：每行的间隔，默认为20

            startLeft:控制最左边的起始位置，默认不传为0

            * */

            function lazyLoad(wrap, box, clonum, marginLeft, marginBottom,startLeft) {

                var posArr = [];

                var boxList = $(wrap).find(box),

                    boxWidth = boxList.width();

                    clonum = clonum || 3;

                    marginLeft = marginLeft || 20;

                    marginBottom = marginBottom || 20;

                    startLeft = startLeft || 0;

                var fn = {};

                fn.init = function() {

                    for(var i = 0; i < clonum; i++) {

                        posArr.push({

                            "top": 0,

                            "left": boxWidth * i + marginLeft * i + startLeft

                        });

                    }

                    fn.layout();

                };

                fn.layout = function() {

                    var min = 0,

                        max = 0;

                    boxList.each(function(index, ele) {

                        min = fn.getHeight().minIndex;

                        $(ele).css({

                            "top": posArr[min].top,

                            "left": posArr[min].left

                        });

                        posArr[min].top = posArr[min].top * 1 + $(ele).height() * 1 + marginBottom;

                        max = fn.getHeight().maxIndex;

                        /*更新外层的高度*/

                        $(wrap).css({

                            "height": posArr[max].top

                        });

                    });

                };

                fn.getHeight = function() {

                    var minHeight = posArr[0].top,

                        maxHeight = posArr[0].top,

                        minIndex = 0,

                        maxIndex = 0;

                    for(var i = 0; i < posArr.length; i++) {

                        if(minHeight > posArr[i].top) {

                            minHeight = posArr[i].top;

                            minIndex = i;

                        }

                        if(maxHeight < posArr[i].top) {

                            maxHeight = posArr[i].top;

                            maxIndex = i;

                        }

                    }

                    return {

                        "minIndex": minIndex,

                        "maxIndex": maxIndex

                    };

                };

                return fn;

            }

        });

    </script>

</html>

js瀑布流（定位法）的更多相关文章

  1. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

  2. 面向对象js瀑布流效果

    index.html <!doctype html><html lang="en"> <head>  <!--网站编码格式,UTF-8 国 ...

  3. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  4. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  5. JS 瀑布流效果

    JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  6. JS瀑布流效果

    本篇内容实现类似百度图片的呈现功能,瀑布流+自动加载 index13.html <!DOCTYPE html> <html> <head> <meta cha ...

  7. 比较容易理解的---原生js瀑布流

    最近一直在恶补基础JS H5 CSS3的基础知识 关于这个瀑布流: 本来打算看着教程来做的. 不过 感觉理解起来有点复杂. SO, 自己参考教程默写了一个.. 目前我所接触过的瀑布流布局分为2大类 主 ...

  8. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  9. 原声JS瀑布流加延迟载入

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. JavaScript老梗之this对象

    Js中的this关键词貌似是初学者必经的坑 都不例外 我们经常听到其他人说 this对象谁调用指向谁 的确这是最容易理解的 但是我们可以更加深入的去探索下 加深印象以便更加灵活的适用它 这里不得不提下 ...

  2. 2016 ACM/ICPC Asia Regional Dalian Online(更新到五道题)

    1006 Football Games 这道题输入也很阴险!!! 这道题过题姿势最优雅的,不是if else if else if.那样很容易wa的. 如果没有平手选项, 赢得加一分的话, 可以用La ...

  3. iOS typedef NS_ENUM 与 NSString

    //在头文件中声明 typedef NS_ENUM(NSUInteger, TransactionState) { TransactionOpened, TransactionPending, Tra ...

  4. HTML: vertical algin Big/small div in same row (bootstrap)

    Reference: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=vot ...

  5. Linux Kernel Oops异常分析

    1．PowerPC小系统内核异常分析 1.1  异常打印 Unable to handle kernel paging request for data at address 0x36fef31eFa ...

  6. Android入门（七）：Spinner下拉式菜单组件

    对于手机和平板电脑的应用程序来说,打字是非常不方便的操作方式,比较好的方式就是列出一组选项让用户挑选,这样就可以避免打字的麻烦.使用Spinner下拉菜单组件需要完成以下几个步骤: 1.建立选项列表, ...

  7. poj1236Network of Schools Tarjan裸题

    其实就是手打了个Tarjan的模板 输出的时候注意是入度为0的点的个数和max(入度0的个数,出度0的个数),在n=1时特判为0即可 ——以后图论要渐渐模板化,方便使用 #include <cs ...

  8. Make github as your personal maven repository

    前言: 开始用maven管理java项目后,突然发现自己写了一些通用的项目想要被别的项目依赖是件很麻烦的事.公司里项目依赖可以直接有maven仓库,但个人项目呢? github 再次显示其威力了,ex ...

  9. 【python+mysql】在python中调用mysql出问题 ImportError: No module named MySQLdb.constants

    遇到如下异常: File "C:\Users\Neil\PycharmProjects\ScrapyDouban\book\book\database.py", line 4, i ...

  10. Python打包成exe：屡试不爽的cxfreeze！

    Python用cxfreeze打包,不用像什么Pyinstaller繁杂的写配置文件,一行命令足以! 安装好cxfreeze后,进行python脚本目录,执行: C:\Python27\Scripts ...