jquery制作图片瀑布流点击按钮加载更多内容

<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>