什么是 oly-angular-isotope
oly-angular-isotope 是一个 AngularJS 的 npm 包，它提供了基于 Isotope 的动态布局效果，并且可以很容易地集成到你的 AngularJS 应用程序中。
安装 oly-angular-isotope
从 npm 安装 oly-angular-isotope：
$ npm install oly-angular-isotope --save
将 oly-angular-isotope 映射到你的 AngularJS 应用程序依赖中：
angular.module('myApp', ['oly-angular-isotope']);
使用 oly-angular-isotope
在你的 HTML 模板中添加一个或多个 Isotope 容器：
<div isotope="{ options }"> <div isotope-item ng-repeat="item in items"></div> </div>在你的控制器中定义 item 的数组：
myApp.controller('myCtrl', function($scope) { $scope.items = [ { src: 'img1.jpg', category: 'cat1' }, { src: 'img2.jpg', category: 'cat2' }, { src: 'img3.jpg', category: 'cat1' }, ... ]; });在容器中使用 isotope-item 指令来标记每个 item：
<div isotope="{ options }"> <div isotope-item ng-repeat="item in items"> <img ng-src="{{ item.src }}" /> </div> </div>在容器的 isotope 属性中定义 Isotope 的 options：
-- -------------------- ---- ------- ---------------- - - ------------- ---------------- ----------- ---------- -------- - ------------ ---- ------- -- -- ------- ------- --在容器的 isotope 属性中使用 $scope.myOptions 变量：
<div isotope="$scope.myOptions"> ... </div>
使用 isotopeUpdate() 函数来动态更新 Isotope 容器中的布局：
-- -------------------- ---- ------- -------------------------- ---------------- --------- - ------------ - - --- -- ------------------- - ------------------- ---- ----------- --------- ------ --- ----------------------- -- ------ ---
示例代码
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
-------------------------- ----------
----- ---------------- --------------------------------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------------------
----- ---------------- -----------------
-------
------
---- ------------- ----------------
---- ------------------------
---- ----------------------
-- -------------------- ---------------------------- ------
------
------
------
---- ---------------------- ------------------
--- ---------- ----------
--- ----------- ------- -------- --- ----- ---
-- -------- ------------------ - -------------
-----
--- ----------- ------- -------- --- ------ ---
-- -------- ------------------ - ---------- -----
-----
--- ----------- ------- -------- --- ------ ---
-- -------- ------------------ - ---------- -----
-----
-----
---- ---------------------------
---- ------------ --------------- -- ------ --------- ------------- ----
---- ---------- -------- --- --
------
------
------
------- --------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------
--------
----------------------- ------------------------
--------------------- ---------------- ---------- -
--------------- - ------
------------ - -
- ---- ----------------------------------------- --------- ------ --
- ---- ----------------------------------------- --------- ------ --
- ---- ----------------------------------------- --------- ------ --
- ---- ----------------------------------------- --------- ------ --
- ---- ----------------------------------------- --------- ------ --
- ---- ----------------------------------------- --------- ------ -
--
---------------- - -
------------- ----------------
----------- ----------
-------- -
------------ ----
------- --
-
--
-------------------- -
------------------- ---- --------------------------------------- - -------------------- - --- --------- ------ ---
-----------------------
-- ------
---
---------
-------
-------结论
oly-angular-isotope 是一个非常有用的 AngularJS npm 包，它提供了基于 Isotope 的动态布局效果，并且可以很容易地集成到你的 AngularJS 应用程序中。通过使用 oly-angular-isotope，你可以创建令人印象深刻的图库和瀑布流式布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fb03d1de16d83a6735f