amazeui+Masonry+ajax+tp5+h5 实现的瀑布流动态加载( 解决加载后的数据排版错乱的问题）

1.效果展示

2.html的模板，用的tp框架 标签循环数据，用过的应该知道，就不细说了 用到

  <!--瀑布流-->
  <div class="am-g" id="waterfall_list"> 
   {volist name='signuplist' id='vo'}
    <div class="am-u-sm-6" data-activity_id="{$vo.activity_id}">
      <div id="sigup_pic">
        <div id="signuo_id">{$vo.id}号</div>
        <a href="{$url}/details/{$vo.activity_id}/{$vo.id}" title="{$vo.title}"><img src="{$url}/{$vo.pic}" style="width:100%;" alt="{$vo.title}" title="{$vo.title}" /></a> </div>
      <div id="sigup_txt" class="sigup_txt">
        <div id="title">{$vo.title}</div>
        <div id="total_ticket" class="total_ticket{$vo.id}">{$vo.total_ticket}票</div>
      </div>
      <div class="sigup_vote" data-id="{$vo.id}"  data-activity_id="{$vo.activity_id}">投票</div>
    </div>
    {/volist} </div>
  <!--加载更多按钮-->
  <div class="am-g" id="LoadPlayer0">
    <div class="am-u-sm-12">
      <input type="hidden"  name="page" id="page" value="1">
      <button type="button" class="am-btn am-btn-danger am-radius" id="LoadPlayer">加载更多</button>
    </div>
  </div>
  <!--加载更多按钮--> 
  <!--瀑布流--> 

3.初始布局

	
    //初始化瀑布流
    var $waterfall = $('#waterfall_list');
    $waterfall.imagesLoaded(function () {
        $waterfall.masonry({
            itemSelector: '.am-u-sm-6',
        });
    })

初始化，html5的呈现的效果截图展示一下

 

以上步骤都很简单，比较坑的，是动态加载后的数据，无法 定位和计算单元的偏离值

 这个是get_signup_player接口php代码 返回的是json数据       $waterfall.masonry 重新初始化很重要，不然无法计算每个单元的偏离值和给单元 加css  

 get_signup_player 返回json数据

     $page = $this->param['page'] ? $this->param['page'] : 1;
        $activityId = $this->param['activityId'] ? $this->param['activityId'] : 1;
        if ($activityId) {
            $su_map['activity_id'] = array('eq', intval($activityId));
            $su_map['pic'] = array('gt', 0);
            $su_field = "id,pic,title,activity_id,total_ticket";
            $signup_list = SignupModel::where($su_map)->field($su_field)->page($page, 10)->order("id desc")->select();
            if ($signup_list) {
                //循环显示图片
                foreach ($signup_list as $key => $value) {
                    if ($value['pic']) {
                        $pic = AttachmentModel::where("id", $value['pic'])->value("path");
                        $signup_list[$key]['pic'] = $pic;
                    }
                }
            } else {
                $signup_list = "";
            }

            $return_data['signup_list'] = $signup_list; //数据
            $return_data['page'] = $page; //当前页码
            return $this->resultArray(['code' => 201, "data" => $return_data]);
        } else {
            return $this->resultArray(['code' => 201, "error" => "参数错误"]);
        }

 

下面是加载处理ajax 请求，及处理返回的加载数据，和瀑布流重新初始化

 

    //点击加载数据
    $("#LoadPlayer").on('click', function () {
        //获取当前活动的ID
        var activityId = $("#waterfall_list").children(".am-u-sm-6").first().attr("data-activity_id");
        //计算下一页面
        var page = Number($("#page").val()) + 1;
        if (activityId) {
            $.ajax({
                type: "POST",
                url: '/Api/get_signup_player',
                data: {
                    'activityId': activityId,
                    'page': page
                },
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data.code == 200) {
                        //查询下一页 页码
                        next_page = data.data.page;
                        $("#page").val(next_page);
                        //返回的数据
                        signup_list = data.data.signup_list;
                        if (signup_list.length >= 1){
                            var $addhtml = "";
                            for (var i = 0; i < signup_list.length; i++) {
                                $addhtml += "<div class='am-u-sm-6' data-activity_id=" + signup_list[i].activity_id + ">";
                                $addhtml += "<div id='sigup_pic'>";
                                $addhtml += "<div id='signuo_id'>" + signup_list[i].id + "号</div>";
                                $addhtml += "<a href='{$url}/details/" + signup_list[i].activity_id + "/" + signup_list[i].id + "'>";
                                $addhtml += "<img src='{$url}/" + signup_list[i].pic + "' style='width:100%;' alt='" + signup_list[i].title + "' title='" + signup_list[i].title + "'/>";
                                $addhtml += "</a>";
                                $addhtml += "</div>";
                                $addhtml += "<div id='sigup_txt' class='sigup_txt'>";
                                $addhtml += "<div id='title'>" + signup_list[i].title + "</div>";
                                $addhtml += "<div id='total_ticket' class='total_ticket"+signup_list[i].id+"'>" + signup_list[i].total_ticket + "票</div>";
                                $addhtml += "</div>";
                                $addhtml += "<div class='sigup_vote' data-id='" + signup_list[i].id + "'  data-activity_id='" + signup_list[i].activity_id + "'>投票</div>";
                                $addhtml += "</div>\n";
                            }
							

                            //追加元素，=
                            $waterfall.append($addhtml).masonry('appended', $addhtml, true);
                            $waterfall.masonry('destroy'); //完全移除masonry的功能 返回到元素预初始化状态
                            //重新初始化化一遍
                             $waterfall.masonry({
                                itemSelector: '.am-u-sm-6',
								
                             });
							 
						

                        } else {

                            $("#LoadPlayer").attr("disabled", "disabled");
                            $("#LoadPlayer").text("没有了");


                        }

                    }




                }
            })
        }

    });

以上内容是我使用masonry.pkgd.js 遇到的坑了，masonry.pkgd.js和imagesloaded.pkgd.min.js 别忘了引入