在百度上看见的好多都是引用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. PL/SQL Block中对单引号进行转义

    可以使用如下的方式: STR := q'[ CREATE TABLE TNAME AS SELECT ... FROM INPUT_TABLE IP WHERE ((IP.DATE_FIELD = T ...

  2. 18.12.02-C语言练习：韩信点兵

    C语言练习:韩信点兵 题目说明:本题是中国经典问题,有多种解法,从数论课程角度看,是一个不定方程组,而且答案不唯一. 但这里采用程序解法,使用的是暴力破解.枚举可能的解,然后根据条件判断,满足所有条件 ...

  3. 2017-2018-2 20155228 《网络对抗技术》 实验一：PC平台逆向破解

    2017-2018-2 20155228 <网络对抗技术> 实验一:PC平台逆向破解 实验内容 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用 ...

  4. matlab 表示一个导数的函数

    对此式在matlab做表示:

  5. 移动端js调试工具：eruda

    通常写前端页面都在Chrome浏览器的开发模式下进行调试,但是写放在移动端的H5页面时,有时候会遇到在Chrome上调试没有问题,但是在手机的浏览器上有问题的情况:或者有些功能只能在特定的容器中才能其 ...

  6. 微信省市区 Mysql数据库

    $jsonStr = '[{"cities":["\u5b89\u5e86","\u868c\u57e0","\u4eb3\u5d ...

  7. RSA非对称加密，公钥加密/私钥解密

    非对称加密 package test; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFound ...

  8. Git_GitHub-使用过程遇到的问题——坑（持续添加）

    push错误——>master git push -u origin master 最后找到解决办法如下: 1.先删除远程 Git 仓库 $ git remote rm origin 2.再添加 ...

  9. [C++ Primer Plus] 第8章、函数探幽（二）课后习题

    1.编写通常接受一个参数(字符串的地址),并打印该字符串的函数.不过,如果提供了第二个参数(int类型),且该参数不为0,则该函数打印字符串的次数将为该函数被调用的次数(注意,字符串的打印次数不等于第 ...

  10. 浅谈php

    strlen() 常用于循环和其他函数,在确定字符串何时结束很重要时.(例如,在循环中,我们也许需要在字符串的最后一个字符之后停止循环). strpos() 函数用于检索字符串内指定的字符或文本. 如 ...