摘要：俗話說的好，不愛美女的程序員不是一個好司機妹子圖煎蛋這幾天一直在菜鳥教程學(xué)習(xí)和，想總結(jié)一下自己的學(xué)習(xí)成果，這個圖片站也就這么自然而然地出來了，主要使用了圖片瀑布流加載數(shù)據(jù)，頁面靜態(tài)化圖片分頁等方法進行實現(xiàn)圖片瀑布流我這里分為兩種瀑布流方法，

俗話說的好，不愛美女的程序員不是一個好司機！
mm:http://mm.luckyw.cn/
妹子圖:http://mzt.luckyw.cn/
煎蛋:http://jd.luckyw.cn/

這幾天一直在菜鳥教程學(xué)習(xí)php和mysql，想總結(jié)一下自己的學(xué)習(xí)成果，so這個mm圖片站也就這么自然而然地出來了，主要使用了圖片瀑布流、ajax加載數(shù)據(jù)，php頁面靜態(tài)化、圖片分頁等方法進行實現(xiàn)

我這里分為兩種瀑布流方法，第一種方式(首頁靜態(tài)化頁面index.html):
先獲取所有的圖片盒子boxes，每個圖片盒子的寬度box_w，文檔的寬度W，從而得到列數(shù)num，然后設(shè)置容器$("#imgBox")的寬度為列數(shù) × 每個圖片盒子的寬度。然后定義一個數(shù)組arr存儲每列的高度，對所有圖片盒子進行遍歷，如果此時索引小于列數(shù)，則把這個圖片盒子的高度添加到盒子中，如果此時索引大于列數(shù)，那么先獲取數(shù)組arr中高度最短minH的那一列的索引minIndex，然后定義圖片盒子在容器中的位置，因為我的容器imgBox已經(jīng)定義了position:relative，設(shè)置圖片盒子為position:absolute則相對于容器進行絕對定位，并設(shè)置圖片盒子的left和top值，之后再把數(shù)組中最低高度那一列的值加上這個圖片盒子的高度，此時即實現(xiàn)了圖片瀑布流效果，隨頁面滾動觸發(fā)ajax加載數(shù)據(jù)，之后一個一個把圖片盒子添加到容器中去

function waterfall() {
    var boxes = $(".box");
    var box_w = boxes.eq(0).outerWidth(true);
    var W = document.body.clientWidth || document.documentElement.clientWidth;
    var num = Math.floor(W / box_w); //5
    $("#imgBox").width(num * box_w);
    $(".w").width(num * box_w);
    var arr = [];
    boxes.each(function(index, ele) {
        var h = $(ele).outerHeight(true);
        if (index < num) {
            arr.push(h);
        } else {
            var minH = Math.min.apply(null, arr);
            var minIndex = getMinIndex(arr, minH);
            $(ele).css({
                "position": "absolute",
                "left": box_w * minIndex,
                "top": minH
            });
            arr[minIndex] += h;
        }
    });
}
function getMinIndex(arr, h) {
    for (var i in arr) {
        if (arr[i] == h) {
            return i;
        }
    }
}

第二種方式(圖片分頁):
基本和上面差不多，也是獲取所有的圖片盒子boxes，每個圖片盒子的寬度box_w，文檔的寬度W，從而得到列數(shù)num，然后設(shè)置容器$("#imgBox")的寬度為列數(shù) × 每個圖片盒子的寬度。不過不同的是，我這里采用定義num個列div盒子，設(shè)置它的寬為圖片盒子的寬度box_w，display為inline-block，然后添加到容器中去，之后把所有的圖片盒子從dom中刪去然后一個一個地追加到最短的那一列中去

我這里是采用python從網(wǎng)上抓取圖片鏈接，然后保存到mysql數(shù)據(jù)庫中，然后設(shè)計一個接口訪問這些數(shù)據(jù)，接口鏈接:http://luckyw.cn/api/load_img...
當(dāng)頁面滾動時觸發(fā)ajax加載數(shù)據(jù)的方法，此時ajax通過接口請求數(shù)據(jù)，然后把一個一個的圖片盒子添加到容器中去，再應(yīng)用圖片瀑布流即達到了瀑布流加載圖片的效果，ajax請求圖片數(shù)據(jù)的代碼如下:

/**
 * ajax請求圖片數(shù)據(jù)
 * @param s:開始位置
 * @param n:每頁數(shù)
 */
function ajax(s, n) {
    $.ajax({
        url: "http://luckyw.cn/api/load_img.php?start=" + s + "&num=" + n,
        method: "GET",
        dataType: "json",
        success: function(data) {
            var imgs = data.list;
            for (var i in imgs) {
                var box = $("
").addClass("box");
                var a = $("").attr({
                    "href": imgs[i]["src"],
                    "target": "_blank"
                }).addClass("item");
                var img = $("").attr("src", imgs[i]["src"]);
                a.append(img);
                box.append(a);
                $("#imgBox").append(box);
            }
            start += num;
            loading = false;
            waterfall();
        },
        error: function(err) {
            if (err) console.log(err);
        }
    });
}

//index.php文件
ob_start();//如果`php.ini`沒有打開緩存，這里打開緩存
require_once ("temp.php");    //加載模板文件
if(file_put_contents("index.html",ob_get_clean())){//把緩存寫入到文件中并清空緩存
    header("location: index.html");//這里是實現(xiàn)頁面跳轉(zhuǎn)到靜態(tài)文件
}else{
    echo "error";
}

$start = 1;
$end = $totalPage;
$showPageNum = 5;
$pageOffset = ($showPageNum-1)/2;
$page_navigation = "";
if($page>1){
    $page_navigation.="首頁";
    $page_navigation.="<上一頁";
}
if($totalPage>$showPageNum){
    if($page>$pageOffset+1){
        $page_navigation .= "...";
    }
    if($page>$pageOffset){
        $start = $page-$pageOffset;
        $end = $totalPage>$page+$pageOffset?$page+$pageOffset:$totalPage;
    }else{
        $start = 1;
        $end = $showPageNum;
    }
    if($page+$pageOffset>$totalPage){
        $start = $start - ($page+$pageOffset-$end);
    }
}
for($i=$start;$i<=$end;$i++){
    if($i==$page){
        $page_navigation.="$i";
    }else{
        $page_navigation.="$i";
    }
}
if($totalPage>$showPageNum&&$totalPage>$page+$pageOffset){
    $page_navigation.="...";
}
if($page<$totalPage){
    $page_navigation.="下一頁>";
    $page_navigation.="尾頁";
}
$page_navigation.="共有{$totalPage}頁";