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. 有史来最大改变 Android 5.0十大新特性

    有史来最大改变 Android 5.0十大新特性 2014.10.16 14:51:31 来源:腾讯数码作者:腾讯数码 ( 0 条评论 )   距离Android系统上一次重大更新不到一年的时间,谷歌 ...

  2. 自定义Toast和RatingBar的简单用例

    Toast是一个包含用户点击消息.Toast类会帮助你创建和显示这些.Android中的Toast是一种简易的消息提示框. 当视图显示给用户,在应用程序中显示为浮动 向右划动五角星增加 单击按钮显示自 ...

  3. cmd中编译java

    cmd定位到.java文件所在位置: 注意.java文件名应与类名相同. javac xxx.java:编译(生成.class文件): java xxx:运行(执行.class文件): 若类间相互调用 ...

  4. 作弊Q-百威

    ===_=374793763===_= 2652880032 865580818 大康 2652880032 春牛 3479301404  皮卡丘 3242026908  舍得放手

  5. oracle 监听启动、停止、查看命令

    1.su oracle 然后启动监听器 1.lsnrctl start  会看到启动成功的界面; 1.lsnrctl stop  停止监听器命令. 1.lsnrctl status  查看监听器命令. ...

  6. python中获取指定目录下所有文件名列表的程序

    http://blog.csdn.net/rumswell/article/details/9818001 # -*- coding: utf-8 -*-#~ #------------------- ...

  7. ZeroMQ接口函数之 ：zmq_recv – 从一个socket上接收一个消息帧

    ZeroMQ 官方地址 :http://api.zeromq.org/4-1:zmq_recv zmq_recv(3)        ØMQ Manual - ØMQ/4.1.0 Name zmq_r ...

  8. javascript压缩工具

    Google Closure Compiler : http://code.google.com/closure/compiler/ YUI Compressor : http://developer ...

  9. android studio增量更新

    一.概述 1.1 概念 增量更新即是通过比较 本机安装版本 和 想要安装版本 间的差异,产生一个差异安装包,不需要从官网下载并安装全量安装包,更不需要将本机已安装的版本下载,而仅仅只是安装此差异安装包 ...

  10. word-wrap: break-word;和word-break: break-all;的区别

    详细查看以下链接.(转载自张鑫旭大神空间) http://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wra ...