在百度上看见的好多都是引用Masonry插件   ，之后我自己尝试了一个没有使用插件的

<body>

        <div id="main">

            <div class="box">

                <div class="pic">

                    <img src="../picture/1.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/2.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/3.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/4.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/5.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/6.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/2.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/4.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/5.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/6.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/2.png">

                </div>

            </div>

        </div>

    </body>

下面是全部的css比较简单

<style>

            * {

                margin:;

                padding:;

            }

            #main {

                position: relative;

                width: 900px;

                margin: 0 auto;

            }

            .box {

                padding: 15px 0 0 15px;

                float: left;

            }

            .pic img {

                width: 165px;

                height: auto;

            }

        </style>

最重要的这一段啦

<script>

        $(window).on('load', function() {

    waterfall();

    var dataInt = {

        "data": [{

            "src": "../picture/1.png"

        }, {

            "src": "../picture/2.png"

        }, {

            "src": "../picture/3.png"

        }]

    };

})

function waterfall() {

    var $boxs = $('#main>div');

    var w = $boxs.eq(0).outerWidth();

    var cols = Math.floor($(window).width() / w);

    $('#main').width(w * cols).css('margin', '0 auto');

    var hArr = [];

    $boxs.each(function(index, value) {

        var h = $boxs.eq(index).outerHeight();

        if (index < cols) {

            hArr[index] = h;

        } else {

            var minH = Math.min.apply(null, hArr);

            var minHIndex = $.inArray(minH, hArr);

            $(value).css({

                'position': 'absolute',

                'top': minH + 'px',

                'left': minHIndex * w + 'px'

            })

            hArr[minHIndex] += $boxs.eq(index).outerHeight();

        }

    })

}

    </script>

下面这段jq  是可以根据鼠标轮播 下拉加载页面

<script>

        $(window).on('load', function() {

    waterfall();

    var dataInt = {

        "data": [{

            "src": "../picture/1.png"

        }, {

            "src": "../picture/2.png"

        }, {

            "src": "../picture/3.png"

        }]

    };

    $(window).on('scroll', function() {

      if (checkScrollSlide) {

            $.each(dataInt.data, function(key, value) {       

                var oBox = $('<div>').addClass('box').appendTo($('#main'));

                var oPic = $('<div>').addClass('pic').appendTo($(oBox));

                var oImg = $('<img>').attr('src', $(value).attr('src')).appendTo($(oPic));

            })

            waterfall();

        }

    })

})

function waterfall() {
    var $boxs = $('#main>div');//包含选择器， 空格选择器会选择所有的子元素 ，> 取mian元素的第一个子元素

    var w = $boxs.eq(0).outerWidth();// 列宽 width（）只能获得图片的宽度，outerWidth（）能获得包括边界的宽度
    var cols = Math.floor($(window).width() / w);

    $('#main').width(w * cols).css('margin', '0 auto');

    var hArr = [];

    $boxs.each(function(index, value) {

     

        var h = $boxs.eq(index).outerHeight();// 获取每个图片的高

        if (index < cols) {

            hArr[index] = h;// 获取第一行的高度

        } else {

            var minH = Math.min.apply(null, hArr);// 获取最矮图片的索引

            var minHIndex = $.inArray(minH, hArr);inArray函数能获取指定数值的索引

            console.log(value);

            $(value).css({

                'position': 'absolute',

                'top': minH + 'px',

                'left': minHIndex * w + 'px'

            })

            hArr[minHIndex] += $boxs.eq(index).outerHeight();

        }

    })

}

function checkScrollSlide() {

    var $lastBox = $('#main>div').last();// 获取最后一个图片

    var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2);// 最后一个图片距离父元素的高度和自身一半的高度

    var scrollTop = $(window).scrollTop();// 划过的高度

    var documentH = $(window).height();//浏览器的高度

    return (lastBoxDis < scrollTop + documentH) ? true : false;

}

    </script>

两个js的 区别：前者没有下拉加载效果   后者有下拉加载效果

瀑布流布局（等宽不等高jQuery）的更多相关文章

  1. flexbox实现不等宽不等高的瀑布流布局

    第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...

  2. js实现网页瀑布流布局

    效果图: html代码实现网页布局: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. JS原生方法实现瀑布流布局

    html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...

  4. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  5. jQuery Wookmark Load 瀑布流布局实例演示

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

  6. jQuery Wookmark 瀑布流布局

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

  7. Jquery瀑布流布局

    瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...

  8. Ajax+json+jquery实现无限瀑布流布局

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. AJAX+json+jquery实现预加载瀑布流布局

    宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...

随机推荐

  1. Jmeter笔记（Ⅱ）使用Jmeter实现轻量级的接口自动化测试

    接口测试虽然作为版本的一环,但是也是有一套完整的体系,有接口的功能测试.性能测试.安全测试:同时,由于接口的特性,接口的自动化低成本高收益的,使用一些开源工具或一些轻量级的方法,在测试用例开发的成本不 ...

  2. nginx+fastCGI

    首先贴些遇到的问题,之后再整理 1.yum -y install pcre zlib OpenSSL openssl-devel  pcre-devel 2. nginx: [emerg] " ...

  3. Unity之如何使用夜神模拟器logcat

    1. 找到夜神模拟器安装目录bin目录,如:D:\Program Files\Nox\bin 2.打开cmd,切到bin目录,如: 3. 输入命令,adb logcat 即可,(可使用命令chcp 6 ...

  4. 从网卡发送数据再谈TCP/IP协议—网络传输速度计算-网卡构造

    在<在深谈TCP/IP三步握手&四步挥手原理及衍生问题—长文解剖IP>里面提到 单个TCP包每次打包1448字节的数据进行发送(以太网Ethernet最大的数据帧是1518字节,以 ...

  5. Java基础语法-Lambda表达式

    1.Lambda表达式主要用于简写接口的操作等出现匿名内部类的地方,如下:我这里先定义一个Swim接口,以及它所定义的swim()方法 interface Swim{ void swim(); } 2 ...

  6. 中文编码错误，Error output could not be translated from the native locale to UTF-8.

    假如使用http访问仓库,用户配置的pre-commit钩子里面如果有中文,可能会出现"Error output could not be translated from the nativ ...

  7. IDEA建立Spring MVC Hello World 详细入门教程

    https://www.cnblogs.com/wormday/p/8435617.html

  8. kubernetes pod infra container网络原理

    刚开始接触kubernetes时,对kubelet的--pod-infra-container-image参数非常不能理解,不理解为什么我的业务应用需要依赖一个第三方的容器: 上文入门级kuberne ...

  9. 58 字体反爬攻略 python3

    1.下载安装包 pip install fontTools 2.下载查看工具FontCreator 百度后一路傻瓜式安装即可 3.反爬虫机制 网页上看见的 后台源代码里面的 从上面可以看出,生这个字变 ...

  10. [C++ Primer Plus] 第10章、对象和类（二）课后习题

    1. bank.h #include <string> using namespace std; class BankAccount { private: std::string m_na ...