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. Hadoop Linux安装

    Hadoop Linux安装 步骤流程 1.硬件准备 2.软件准备(推荐CDH) 3.将Hadoop安装包分发到各个节点下 4.安装JDK 5.修改/etc/hosts配置文件 6.设置SSH免密码登 ...

  2. jquery 使用需要注意

    jquery选择器,层选择器等多个选择器,jquery生成对象,jquery遍历对象, jquery ajax调用不要进行方法封装返回值方式调用,会取不到值. jquery使用要注意很多细节点才能将其 ...

  3. [转]如何解决外边距margin叠加的问题探讨

    两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠,那么如何使元素上下margin不折叠呢?下面的方法或许对大家有所帮助 一.首先你要知道什么情况下会触发:两个或多个毗邻的普通流中的块 ...

  4. 集中式vs分布式区别

    记录一下我了解到的版本控制系统,集中式与分布式,它们之间的区别做下个人总结. 什么是集中式? 集中式开发:是将项目集中存放在中央服务器中,在工作的时候,大家只在自己电脑上操作,从同一个地方下载最新版本 ...

  5. Windows中使用OpenBLAS加速R语言计算速度

    在使用R的时候会发现R对CPU的利用率并不是很高,反正当我在使用R的时候,无论R做何种运算R的CPU利用率都只有百分子几,这就导致一旦计算量大的时候计算时间非常长,会给人一种错觉(R真的在计算吗?会不 ...

  6. tomcat服务器奇异事件

    我在A电脑里面启动服务器,服务器里面之前上传了XX文件,然后在A电脑浏览器能访问到(但是修改无效),在B电脑也能访问到(修改有效果),现在我把A电脑里面的文件删除,在A电脑都能访问到但是修改不了文件, ...

  7. Leetcode 4Sum

    Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...

  8. html和css书写规范

    HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...

  9. BZOJ2705: [SDOI2012]Longge的问题

    Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N). Input 一 ...

  10. navicat使用

      navicat我觉得做程序的基本上都会用,它方便,快捷,直观等,优点很多,这也是我写这篇文章的原因.以前我基本上都是用phpmyadmin,也挺好用,不过也有不少缺点,比如数据库备份文件太大,根本 ...