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. .NET开发者如何愉快的进行微信公众号开发

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:这篇文章只是一个如何提高开发效率的简单指导和记录,不会涉及具体的微信公众号开发内容. ...

  2. Javassist 字节码操作

    1.读写字节码 Javassist是用来处理java字节码的类库.字节码保存在二进制文件中称为类文件.每个类文件夹包括一个java类或接口. Javasssist.CtClass这个类是一个类文件的抽 ...

  3. Android 自动化测试—robotium(九) Junit_report测试报告重定向输出到终端SDCard

    借鉴网上相关资料主要用于无root权限的终端.主要分为以下三步: 一.重写InstrumentationTestRunner类: package com.exmaple.test; import ja ...

  4. [软件推荐]Windows文件夹多标签工具Clover

    Clover 是 Windows Explorer 资源管理器的一个扩展,为其增加类似谷歌 Chrome 浏览器的多标签页功能,目前最新版本为:3.1.7 Clover 把 Chrome 标签页有的样 ...

  5. Websocket简单例子

    websocket是Html5的一个协议,也就是说距离我们2016年就几年时间,其他原理我就不说了,直接讲例子 一.准备材料:1.一个开发工具必须支持javaEE7的,原因是javaEE6或以下不支持 ...

  6. 【Eclipse】 Eclipse 中JPEGEncodeParam 错误波浪线问题

    [异常信息] Description Resource Path Location Type Access restriction: The method encode(BufferedImage, ...

  7. HTML5新的标签和属性

    <article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTML5:<arti ...

  8. mysql基本语法

    MySql一些基本语法      3.3.5 直接在数据库目录中创建或删除 用上述方法创建数据库,只是MySQL数据目录下面创建一个与数据库同名目录,同样删除数据库是把这个目录删除. 所以,你可以直接 ...

  9. 2016huasacm暑假集训训练四 数论_A

    题目链接:http://acm.hust.edu.cn/vjudge/contest/125308#problem/F 题意:狼捉兔子,兔子躲在n个洞中一个,这n个洞围成一个圈,狼会从第0号洞开始,搜 ...

  10. JacksonUtils.java

    package com.vcredit.framework.utils; import java.io.IOException;import java.util.List; import com.fa ...