在百度上看见的好多都是引用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 安装 redis-4.0.9

    下载地址:https://redis.io/download 下载 安装: $ wget http://download.redis.io/releases/redis-4.0.9.tar.gz $ ...

  2. Python笔记之数据类型

    数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定 ...

  3. ACM-ICPC 2018 南京赛区网络预赛（A， J）

    A  签到题 Alice, a student of grade 666, is thinking about an Olympian Math problem, but she feels so d ...

  4. LP-KPN

    LP-KPN 网络结构 网络解析 1. 网络结构中绿色星星标志 公式.其实就是用预测出来的核在原图片经过Laplacian pyramid decomposes 后的图片上进行卷积运算.所以应该使用p ...

  5. 服务器告警其一：硬盘raid问题

    问题描述 服务器一直间断发出告警音,但是根据raid类型的不同有一定可能进入系统. 问题详情 在LSI Mega Webbios自检之后系统开始出现告警音. 在Lsi Mega Webbios的ini ...

  6. springmvc配置之mvc:annotation-driven

    为了简化springmvc配置,spring同时引入了mvc namespace, 配置了 <mvc:annotation-driven/> spring会默认注册a RequestMap ...

  7. mysql之统一刷表

    统一刷表: update report set pdfPath= CONCAT(pdfPath ,substring_index(fileLink, '\\', -1)); update report ...

  8. 在java中如何处理日期格式问题

    1.最简洁的办法就是在对应的对象中加注解 如下一个例子: @DateTimeFormat(pattern="yyyy-MM-dd") @JsonFormat(pattern=&qu ...

  9. nodejs基础快速上手

    node 快速了解 hello node.js console.log("hello Node.js"); let http = require("http") ...

  10. Docker Registry私有仓库搭建

    部署registry 准备一个registry.mydocker.com 的证书 对私有registry取名registry.mydocker.com 目录规划 仓库数据目录:/data/docker ...