算法基于菜单项来生成的Metro UI风格的瓷砖？ [英] Algorithm to generate Metro UI style Tiles based on Menu Items?

问题描述

我作出角应用。我想在主菜单看起来像在Windows 8的瓷砖。
现在，我希望有一个算法，其中有些砖是比其他的大，这将自动生成瓷砖的模式。

I am making an Angular App. I want the main menu to look like the tiles in Windows 8. Now I want an algorithm that will automatically generate a pattern for tiles where some tiles are bigger than others.

所以基本上我想创造一个whichI组件将提供一个数据源为JSON对象的数组containg的菜单项。

So basically I would like to create a component to whichI will provide a dataSource as an array of Json objects containg menu-items.

然后组件应该以某种形式布局砖，它容纳所有的人。

and then the component should layout tiles in a fashion that it accommodates all of them.

我应该如何去做？

我学习angularjs。我能避免使用jQuery插件，并没有它？

I am learning angularjs. Can I avoid using jQuery plugins and do without it ?

推荐答案

我不知道你能处理这个没有外部JS库（MANSORY，同位素）。但是，你可能会步入另一个陷阱。角是要填充的承诺，而不是你的瓷砖DOM。麻烦的是，Mansory为/同位素正试图（重新）计算新的布局，而不必所有数据（宽，高）必要的。您应该使用$超时同步与外部库角范围。

I'm not sure you can handle this without an external JS library (mansory, isotope). But there is another trap you may step into. Angular is going to populate your DOM with promises, not tiles. Trouble is that Mansory/Isotope is trying to (re)calculate the new layout without having all data (width, height) necessary. You should use $timeout to sync Angular scope with external library.

isotopeApp.directive('isotope', function ($timeout) {
return {
    link: function (scope, element, attrs) {
        scope.$on('postAdded', function () {
            $timeout(function () {
                element.isotope('reloadItems').isotope({
                    sortBy: 'original-order'
                });
            })
        })
    }
};

}）;

http://jsfiddle.net/8Qmry/

这篇关于算法基于菜单项来生成的Metro UI风格的瓷砖？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！