Masonry Ajax 實現無限重新整理瀑布流

原文：

效果就如我的個人站yooao.cc

，把我實現的思路分享給大家。

masonry渲染頁面如果有時需要imagesloaded輔助，不然有可能會造成布局重疊。

乙個大體的思路：前端取得最後一篇文章的id，下拉時進行ajax請求新增文章進布局，並同時更新最後一篇文章的id，這樣就可往復迴圈實現無限瀑布流重新整理。

下面說說具體的實現：

一、前端

對於masonry

的基本布局，可以看它的文件。

在頁面第一次渲染時，我在容器底部設計乙個新增按鈕：

<

a id
="add-button"
href
="<?php echo url::to(['post/site/addpost','type_id'=>$type_id,'last_id' => $last_id]) ?>"
class
="btn btn-danger"
>載入更多
a>

type_id是對指定類別的文章新增時需要的，

last_id

就是最後一篇文章的id。

下面是具體的js**：

$(function

(), //
提供給控制器last_id
beforesend: function
(), complete: 
function
(), success: 
function
(posts) 
//將last_id變更為此次請求的最後一篇文章的id
last_id = posts[posts.length-1].id; 
(function
() 
//$elem是每個小塊的模版
var $elem = $('' + posts[i].title + '
'); 
//等載入完後才渲染新新增的小塊
$elem.imagesloaded( function
() );
i++;
},900); 
})() 
//8是我設定的每次新增的文章數，如果此次得到的文章數小於8說明已經到最後，count_post 的值將會為1，之後再下拉不會觸發ajax請求。 
if(count_post < 8)
else
} 
}); 
}});});

用yii2舉例，控制器**：

public function actionaddpost($type_id=null

) 

public function addpost($type_id=null

) 
if($type_id == null
)else
return
$posts;
}

Gallery 實現無限迴圈

通過設定最大值兩億來模擬迴圈 因為總數很大時，肯定數不過來，就相當於模擬了 但是你的實際資料可能只有十幾個 所以iv.setimageresource img.get position 8 通過position 會很大很大 模一下你的實際資料的大小，就行了 gallery.setselection ...

php實現無限分類

access public param pid 節點的id param array 返回該節點的所有後代節點 public function list cate pid 0 access private param arr array 要遍歷的陣列 param pid 節點的pid，預設為0，表示從...

ViewPager實現無限迴圈

從乙個方向上一直滑動。麼有滑到盡頭的感覺。詳細是怎麼實現的呢？看以下的思路。此處畫了一幅圖來表達實現無限迴圈的思路，即在資料起始位置前插入最後一項資料。在最後一項資料後插入第一項資料，當滑動到此處時。更新頁面的索引位置就ok了 這種方法用於資料處理，當中medialist是原始資料，newmedia...