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. Winform实现用多线程、百度地图API解析某公司的物理地址

    前言 作为一个很挫的C#新手总喜欢自己写点儿不着边际的东西,本人是个新手加菜鸟,写B/S的,工作中,任务完成了,空闲下来,总想继续学点儿什么,由此触发了本篇文章了.个人一直认为,.NET中,C/S所要 ...

  2. OpenCV成长之路(2)：图像的遍历

    我们在实际应用中对图像进行的操作,往往并不是将图像作为一个整体进行操作,而是对图像中的所有点或特殊点进行运算,所以遍历图像就显得很重要,如何高效的遍历图像是一个很值得探讨的问题. 一.遍历图像的4种方 ...

  3. LeetCode——Balanced Binary Tree（判断是否平衡二叉树）

    问题: Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced bin ...

  4. iOS ARC 下的单例模式

    #import <Foundation/Foundation.h> @interface RYSingleExample : NSObject<NSCopying> +(ins ...

  5. 学习微信小程序之css2

    一:伪类的使用 .class-btn:active{ color: red;} <button class="class-btn">并集选择器</button&g ...

  6. HDU 3015 Disharmony Trees（树状数组）

    题意:给你n棵树,每棵树上有两个权值X H 对于X离散化 :3 7 1 5 3 6 -> 2 6 1 4 2 5,对于H一样 然后F = abs(X1-X2)   S=min(H1,H2) 求出 ...

  7. GnuStep使用

    gcc -o main main1.m -I/GNUstep/System/Library/Headers -fconstant-string-class=NSConstantString -L/GN ...

  8. css3 tween

    /* * Tween.js * t: current time(当前时间) * b: beginning value(初始值) * c: change in value(变化量) * d: durat ...

  9. Python爬虫学习（4）: python中re模块中的向后引用以及零宽断言

    使用小括号的时候,还有很多特定用途的语法.下面列出了最常用的一些: 表4.常用分组语法 分类 代码/语法 说明 捕获 (exp) 匹配exp,并捕获文本到自动命名的组里 (?<name>e ...

  10. 开篇一文 php 和 js 默认参数

    啥话不说... <?php function setheight($height=50){ echo "这个高度是 $height <br />"; } seth ...