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