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>