这个月公司下发的一个项目，需要做个信息交流网站，其中手机端加载使用的是瀑布流
第一时间想到的是插件，但是还是想自己动手写一下，不太想依赖插件。
需求是这样的：需要按照不同的标签使用瀑布流加载出不同的内容。用户点击某一个标签的时候，显示的内容也只能是跟这个标签相关的。如图:
如果没有数据，那么底部就提示没有数据了。
先说下思路，如果是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这个参数的值。如果不等于的话。那么继续查询后台，加载数据到前台去。如果等于的话，就不让用户能点击这个加载按钮。
到这就写完了，如果有的朋友看不懂的或者觉得乱的话，请见谅。写作水平不好。其中有一部分是描述了当时写这个功能的时候碰到的问题和我解决的思路。