JQuery实现简单瀑布流布局

本文实例为大家分享了JQuery实现简单瀑布流布局的具体代码，供大家参考，具体内容如下

分享一个基于JQuery实现的瀑布流布局，效果如下：

实现代码如下，欢迎大家复制粘贴。

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>基于JQuery实现的瀑布流布局案例</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
 
        #main {
            position: relative;
        }
 
        .pin {
            padding: 15px 0 0 15px;
            float: left;
        }
 
        .box {
            padding: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 0 6px #ccc;
            border-radius: 5px;
        }
 
        .box img {
            width: 162px;
            height: auto;
        }
    </style>
</head>
 
<body>
    <div id="main">
        <div class="pin">
            <div class="box">
                <img src="./images/1.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/2.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/3.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/4.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/5.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/6.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/7.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/8.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/9.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/10.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/11.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/12.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/13.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/14.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/15.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/16.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/17.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/18.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/19.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/20.jpg" />
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/21.jpg" />
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" />
    </script>
    <script>
        $(window).on("load", function () {
            //调用瀑布流函数
            waterfall('main', 'pin');
            //模拟json数据
            var dataInt = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] };
            //滚动加载
            window.onscroll = function () {
                //判断是否具备加载剩余图片
                if (checkscrollside()) {
 
                    //遍历模拟的json数据中dataInt.data值,得出下标和值
                    $.each(dataInt.data, function (index, value) {
 
                        //创建div添加class为pin，添加到ID为main的div中
                        var $oPin = $('<div>').addClass('pin').appendTo($("#main"));
 
                        //创建div添加class为box，添加到class为pin的div中
                        var $oBox = $('<div>').addClass('box').appendTo($oPin);
 
                        //创建图片添加src属性添加到class为box的div中
                        $('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($oBox);
                    });
 
                    //调用瀑布流功能函数，让加载的图片按规则排列
                    waterfall();
                };
            }
        });
 
        //瀑布流功能函数
        function waterfall(parent, pin) {
 
            //获取所有图片容器（含内边距)
            var $aPin = $("#main>div");
 
            //获取其中一列的宽度 (outerWidth()可以获取padding值,width()无法获取)
            var iPinW = $aPin.eq(0).width();
 
            //通过整个窗口的宽度除以单列的宽度得出多少列,并向下取整
            var num = Math.floor($(window).width() / iPinW);
 
            //设置图片容器的宽度，并居中显示
            $("#main").css({
                'width:': iPinW * num,
                'margin': '0 auto'
            });
 
            //存储每一行当中列的高度
            var pinHArr = [];
 
            //遍历所有的图片容器，得出下标和值
            $aPin.each(function (index, value) {
 
                //将当前图片的高度存在pinH中
                var pinH = $aPin.eq(index).height();
 
                //如果图片容器的下标小于当前的列数,即只有一行
                if (index < num) {
 
                    //将第一行每一张图片的高度存在数组中
                    pinHArr[index] = pinH;
 
                } else {
 
                    //通过Math.min.apply求出数组pinHArr（第一行）中高度的最小值 
                    var minH = Math.min.apply(null, pinHArr);
 
                    //通过inArray(判断的值,所在数组)得出高度最小那张图片的下标
                    var minHIndex = $.inArray(minH, pinHArr);
 
                    //设置剩余图片的样式,value为Dom对象，要将其转换为JQuery对象
                    $(value).css({
                        //绝对定位
                        'position': 'absolute',
                        //top值 
                        'top': minH + 15,
                        //left值为第一行中高度最小图片的left值
                        'left': $aPin.eq(minHIndex).position().left
                    });
                    //设置每一行中高度最小那一列的高度等于该列剩余图片高度的累加
                    pinHArr[minHIndex] += $aPin.eq(index).height() + 15;
                }
            });
        }
 
        //封装函数，检验是否需要加载图片
        function checkscrollside() {
 
            //获取所有图片容器（含内边距)
            var $aPin = $("#main>div");
 
            //将最后一张图片的top值加上该图片自身高度的一半存为变量lastPinH中
            //注意last()获得的是一个数组,通过get(0)获得第一个
            var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height() / 2);
 
            //获取页面滚动的距离
            var scrollTop = $(window).scrollTop();
 
            //获取屏幕高度
            var documentH = $(document).height();
 
            //当lastPinH小于页面滚动距离与屏幕高度之和时,返回true，具备加载条件，否则返回false，不具备
            return (lastPinH < scrollTop + documentH) ? true : false;
        }
 
    </script>
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 网页瀑布流布局jQuery实现代码

    网页瀑布流布局jQuery实现代码

    什么是瀑布流网页布局? 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 下面来看代码,用纯CSS3来做看效果怎样! HTML <div id="all"> <div class="box"> <div class="pic"> <img src="cars/1.jpg"/>

  • jQuery Masonry瀑布流布局神器使用详解

    jQuery Masonry瀑布流布局神器使用详解

    最近在做个网站时,其中有一部分涉及到很多图片布局,想采用比较流行的Water Flow布局. 开始的时候自己动手写的,真费事情,没有考虑检测图片大小,虽然也能达到布局效果,但是图片有的本身尺寸比较小却被强行拉大了,看起来很不和谐.后来上网收了一下,原来有很好的Water Flow布局工具使用.下面来认识一下这个神器吧~ 神器名称:JQuery Masonry , 网址:http://masonry.desandro.com/index.html 使用方法相当简单: 1.标记需要布局的容器和Ite

  • jQuery实现瀑布流布局

    HTML 复制代码 代码如下: <div id="main">          <div class="box">              <div class="pic">                  <img src="images/0.jpg" alt="">              </div>          </di

  • jQuery+HTML5美女瀑布流布局实现方法

    jQuery+HTML5美女瀑布流布局实现方法

    本文实例讲述了jQuery+HTML5美女瀑布流布局实现方法.分享给大家供大家参考.具体如下: 这是一款JavaScript与HTML5实现美女瀑布流布局,本方法是把图片的路径写在了JS的数组里,不过重点好像不是在这里,而是在图片如何自动排列的问题,你可以运行本实例后,点击"加载瀑布流布局"按钮,即可看到图片的瀑布流排列效果,现在很流行这个,希望您从本代码中能找到一些灵感. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-html

  • jquery实现简单的瀑布流布局

    jquery实现简单的瀑布流布局

    是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流从布局的角度来说,就是4个li标签.通过一定的事件(比如滚动条滚动多少px),然后读取之,再把数据动态地添加到页面中. 添加数据原则,不是根据li索引值来加,而是根据各列中高度最短的的那列动态添加.否则可能导致页面很难看(左右高度不统一). 实例涉及ajax方法.可在服务器环境下运行. 废话不多说了.直接上样式. <ul id=&qu

  • jQuery实现瀑布流布局详解（PC和移动端）

    jQuery实现瀑布流布局详解（PC和移动端）

    瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.这种布局图片的样式大概分为三种:等高等宽.等宽不等高.等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例. 我们用百度图片作为范例: 这就是PC端比较常见的瀑布流布局方式,接下来我们审查下元素看看百度图片里面是如何布局: 可以看到,它里面实际是若干个等宽的列容器,通过计算将图片push到不同的容器里.而本文介绍的展示方法是通过定位的方式,虽然最后布局展示的方式不同,但之前的算法都比较类似. 动手 首先我们将如下样

  • jQuery 瀑布流 绝对定位布局（二）(延迟AJAX加载图片)

    瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一般三四个)UL分布放置LI: 2.AJAX不一样 绝对定位:只需要将请求来的JSON数据(当然可以是别的格式的数据),插入到UL就可以了.然后再对这个新插入的LI进行TOP和LEFT设置: 浮动布置:是将请求来的JSON数据(当然可以是别的格式的数据),分别插入到对应的UL当中,因为有绝对定位,所以不用对LI设置位置.会自动向下排列: 一.功能分析: 1.定位每一个L

  • 基于jquery实现瀑布流布局

    基于jquery实现瀑布流布局

    本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: 使用jquery-1.8.3.min.js,waterfall.js代码如下: $( window ).load( function(e){ waterfall(); var dataInt = { 'data': [{ 'src': '1.jpg' },{ 'src': '2.jpg' },{ 'src': '3.jpg' },{ 'src': '4.jpg' }]}; $(

  • Jquery实现瀑布流布局（备有详细注释）

    本文实例讲述了Jquery实现瀑布流布局的方法.分享给大家供大家参考.具体如下: 瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练). <!doctype html> <html> <head> <meta charset="utf-8"> <title

  • jQuery 瀑布流 浮动布局（一）(延迟AJAX加载图片)

    浮动布局:即HTML结构的列,是用浮动方式. 一.功能分析: 1.判断图片是否进入可视区域: 2.用AJAX请求服务器数据: 3.将数据播入到相应的列队: 二.实现方法: 给window的scroll事件l绑定一个处理函数:做如下工作: 1.如何判断最后一行的图片,是否进入了可视区域? 如果:最后一行的某个图片距离浏览器可视区域顶部的距离值 小于 (可视区域的高度+滚动条滑动的距离值): 那么:就可以判定这个图片进入了浏览器的可视区域: 2.如何用AJAX请求服务器数据; $.getJSON()

随机推荐