博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery制作图片瀑布流点击按钮加载更多内容
阅读量:4570 次
发布时间:2019-06-08

本文共 1284 字,大约阅读时间需要 4 分钟。

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

$(function() {

    //url data function dataType

    function loadMeinv() {

        var data = 0;

        for (var i = 0; i < 25; i++) {//每次加载时模拟随机加载图片

            data = parseInt(Math.random() * 25);

            var html = "";

            html = '<li><div class="water_pic"><a href="#"><img src = img/'

                + data + '.jpg></a></div><div class="water_user">美女小清新_'

                + data + '</div><div class="water_option"><a href="" class="option_item">收藏 4</a> <span class="split"></span><a href="" class="option_item option_comt">评论 8</a><span class="split"></span><a href="" class="option_item option_relay">转播 124</a></div></li>';

            $minUl = getMinUl();

            $minUl.append(html);

        }

    }

    loadMeinv();

    //无限加载

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

        $minUl = getMinUl();

        if ($minUl.height() <= $(window).scrollTop() + $(window).height()) {

            //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片

            //loadMeinv();//加载新图片

        }

    })

    function getMinUl() {//每次获取最短的ul,将图片放到其后

        var $arrUl = $("#container .col");

        var $minUl = $arrUl.eq(0);

        $arrUl.each(function(index, elem) {

            if ($(elem).height() < $minUl.height()) {

                $minUl = $(elem);

            }

        });

        return $minUl;

    }

    //点击更多加载

    $("#loadMeinvMOre").click(function() {

        $minUl = getMinUl();

        loadMeinv();

    });

})

</script>

转载于:https://www.cnblogs.com/haiying520/p/5337396.html

你可能感兴趣的文章
静态常量的问题
查看>>
cookie、 sessionStorage 、localStorage之间的区别和使用
查看>>
.Net(c#)加密解密之Aes和Des
查看>>
BZOJ 入门OJ 2004: [Noip模拟题]统计损失
查看>>
uva 11572 unique snowflakes——yhx
查看>>
二分——二分查找算法模板
查看>>
关于二次封装css selector 的复数定位
查看>>
自学C#:常用快捷键-随时补充
查看>>
[BZOJ4012] [HNOI2015]开店
查看>>
iOS5新开发的API总述——WWDC 2011
查看>>
JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构...
查看>>
基于IdentityServer4的OIDC实现单点登录(SSO)原理简析
查看>>
Multicast Routing
查看>>
java NIO中的buffer和channel
查看>>
使用JRegistry来操作window系统注册表
查看>>
函数递归,算法之二分法,表达式,生成式,匿名函数及常用内置函数
查看>>
Nginx,uWSGI与Django 应用的关系
查看>>
Html显示地图
查看>>
MySQL索引选择问题(要相信MySQL自己选择索引的能力)
查看>>
Angular i18n
查看>>