在百度上看见的好多都是引用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. Centos7 下安装mysql5.7.17（glibc版）

    一.安装前的检查 1.1 检查 linux 系统版本 [root@localhost ~]# cat /etc/system-release 1.2 检查是否安装了 mysql [root@local ...

  2. stm32 堆溢出

    STM32 堆溢出 遇到的问题 最近在给旧项目添加了段代码,程序经常到某个状态就突然崩溃了,也不一定是在运行新代码的时候崩溃.检查了几遍代码,数组越界访问,除数为0,内存泄露等常见的问题都不存在. 原 ...

  3. 用一句sql语句更新两个表并可更新对应的字段的值

    ACCESS 例子: insert into products (ProNumber,CASNumber,Cnname,Price,Enname,Baozhuang,Pinpai) select Pr ...

  4. 畅捷通T+12.2升级时发生的错误及处理方法图解

    前言:最近处理一个客户单位的财务数据,需要从2004年的U820版本的数据升级到畅捷通T+12.2版本.经查,该升级先要将原数据升级到T6,再从T6升级到畅捷通T+12.2版本.U820升级到T6很简 ...

  5. JavaScript自定义事件和触发(createEvent, dispatchEvent)

    $(dom).addEvent("ft", function() { alert("走起"); }); // 创建 var evt = document.cre ...

  6. 信步漫谈之JDK—源码编译

    一.环境 Linux 系统:CentOS_6.5_x86_64 JDK 安装包:jdk-7u80-linux-x64.rpm OpenJDK 源码包:OpenJDK7 下载路径:http://down ...

  7. Anaconda安装出现Failed to create Anaconda menus错误及其解决

    我在自己的电脑上安装Anaconda3.6没有出现这个错误(win7系统),在公司的电脑(win10系统)上安装则出现了这个错误,且之前都已经安装了python3.6.需要使用如下方法解决: 安装时选 ...

  8. Visual Studio 2010 集成 SP1 补丁 制作 Visual Studio 2010 Service Pack 1 完整版安装光盘的方法

    Now that Visual Studio 2010 SP1 has been released, administrators and developers may wish to install ...

  9. 博客地址更改为csdn博客：https://blog.csdn.net/zysps1

    由于博客园不支持markdown的数学公式等语法,有时分享不方便,特更改阵地为csdn:https://blog.csdn.net/zysps1

  10. 题解 Luogu P3623 [APIO2008]免费道路

    [APIO2008]免费道路 题目描述 新亚(New Asia)王国有 N 个村庄,由 M 条道路连接.其中一些道路是鹅卵石路,而其它道路是水泥路.保持道路免费运行需要一大笔费用,并且看上去 王国不可 ...