這個月公司下發的一個專案，需要做個資訊交流網站，其中手機端載入使用的是瀑布流

第一時間想到的是外掛，但是還是想自己動手寫一下，不太想依賴外掛。

需求是這樣的：需要按照不同的標籤使用瀑布流加載出不同的內容。使用者點選某一個標籤的時候，顯示的內容也只能是跟這個標籤相關的。如圖:

如果沒有資料，那麼底部就提示沒有資料了。

先說下思路，如果是ajax分頁載入，沒有分類的話，那麼我們只需要獲取到第一次載入這個頁面查詢出來的資料和，然後再使用ajax的時候，獲取已有的資料後，把第一次載入的數量為第二頁查詢的條數開始就行了。以此類推！

例如:比如總資料有100條，第一次載入的時候獲取了10條，資料庫還剩下90條，分成頁面的話一共就是10頁，剩下就只有9頁了。所以後面每次載入的是N*10,載入完後N+1,N代表的是當前頁數。

但是現在碰到個問題，沒有分類的時候，這個寫法是可以寫出來的。但是多了個分類篩選，就多了一個條件。但是資料庫裡面的資料都是存放在一個數據表，分類表和資訊表使用的是ID關聯。而分類標籤是在頁面是foreach遍歷出來的。那麼分類遍歷出來的標籤改如何精準的獲取到使用者點選的是哪個分類的資訊呢？

首先：

首先遍歷出一級分類標籤。

也就是，流量，產品。IP，資金這4個標籤。

然後遍歷出想對應的資訊列表。

想要精確的識別出來使用者點選的是哪個分類，那麼就要索取到這個分類的唯一值。

我使用的是使用者點選哪個就給哪個添加個CLASS。例如：

例如我點選到產品這個分類，那麼我就給產品這個分類的DIV加個class。class也可以做一些HTML的設定。

這樣就獲取到了唯一DIV.因為你點哪個，哪個div才會有這個class

$(".fenlei_box button").click(function(){
        $(this).addClass("active").siblings('button').removeClass("active");
        var index=$(this).index();
        $(".list_box").eq(index).addClass("list_show").siblings('.list_box').removeClass("list_show");
    });

點選載入更多按鈕的時候就要顯示新的資料。

也就是點選這個ID為fa-loadmore的button之後要加載出來資料。也就是說，我們要在使用者點選這個按鈕之前獲取到使用者點選的是哪個分類的資訊。

做完這個之後，出現一個問題。就是比如，你不知道要查詢多少次

。也不知道具體的已經載入了多少條資料了。所以我在查詢之前，先獲取到class_show這個class的子DIV的個數，為已經載入的資料條數總和，點選的當前分類ID，總頁數。然後把條數總和n_start和type這2個變數使用ajax傳遞到後臺Index/ajax_return_data進行查詢資料，

#php後臺程式碼

//ajax查詢資料
    public function ajax_return_data()
    {
        $start=input("post.start");
        $type=input("post.type");
        if(!empty($type) && $type!=999)
        {
            $list = Db::name('Need')->cache("need_sql_2_".$type."_".$start,7200)->alias(['yxhy_need'=>'a','yxhy_need_label'=>'b'])->join("yxhy_need_label","b.id=a.label_one_id")->field("a.id,a.need_title,b.label_name")->where("a.label_one_id",$type)->limit($start,INDEX_PAGR_LIMIT)->order('a.create_time desc')->select();
        }else{
            $list = Db::name('Need')->cache("need_sql_3_".$start,7200)->alias(['yxhy_need'=>'a','yxhy_need_label'=>'b'])->join("yxhy_need_label","b.id=a.label_one_id")->field("a.id,a.need_title,b.label_name")->limit($start,INDEX_PAGR_LIMIT)->order('a.create_time desc')->select();
        }
        return array("data"=>$list,"status"=>1,"msg"=>"獲取成功");
    }

根據分類查詢到資料後，使用array資料格式傳遞到前臺。

說到這之前，忽然想到了寫完這個功能之後，有個bug，就是每次要像後臺查詢一遍資料，才給使用者返回資料，如果流量大點，那麼可能資料庫會崩潰。所以後面就把他改為，初始化了當前DIV的data-num的資料總和，data-num是分類的總資料條數。例如資料表存放了100條資料，產品這個分類有30條資料，那麼在遍歷分類標籤的時候。把已經準備好的分類總數初始化給這個data-num屬性上，然後使用者在點選的時候我們先查詢當前DIV的子元素的個數(也就是有多少條已經展示的資訊)判斷下展示的資訊是否等於data-num這個引數的值。如果不等於的話。那麼繼續查詢後臺，載入資料到前臺去。如果等於的話，就不讓使用者能點選這個載入按鈕。

到這就寫完了，如果有的朋友看不懂的或者覺得亂的話，請見諒。寫作水平不好。其中有一部分是描述了當時寫這個功能的時候碰到的問題和我解決的思路。