javascript - 如何为angular-gridster添加网格？

Question

如何为 angular-gridster 添加动态坐标网格？

我的例子 http://jsfiddle.net/qqzvjvfx/24/

<div ng-app="someApp" ng-controller="someCtrl">
    <div gridster="gridsterOpts">
        <ul>
            <li class="" gridster-item="block" ng-repeat="block in sorted_blocks">
                <div class="panel panel-default">
                    <div class="panel-heading">{{ block.title }}</div>
                    <div class="panel-content image-responsive" 
                         ng-style="{'background-image':'url(' + block.image + ')'}"></div>
                </div>
            </li>
        </ul>
    </div>
</div>

Angular Controller :

angular.module('someApp', ['gridster']).controller('someCtrl', function ($scope, $http) {
    $scope.gridsterOpts = 
    {
        resizable: {
            enabled: true
        },
        columns: 4,
        rows: 16,
        minRows: 4,
        margins: [0,0],
        floating: false
    };
    $scope.sorted_blocks = [{
        id: 1,
        sizeX: 1,
        sizeY: 1,
        image: 'http://i.imgur.com/NI1Xm16.jpg',
        title: 'title1',
        row: 1,
        col: 2
    }, {
        id: 2,
        sizeX: 2,
        sizeY: 1,
        image: 'http://i.imgur.com/x6qmeUY.jpg',
        title: 'title2',
        row: 0,
        col: 0
    }];
});

CSS:

.panel {
    display: flex;
    flex-flow: column wrap;
    height: 100%;
}

.panel .panel-content {
    flex-grow: 1;
}

.image-responsive {
    background-size: contain;
    background-repeat: no-repeat;
}

gridster 的字段宽度是固定的 - 4 列，高度是动态的，从 4 到 16 行。 我需要在 block 下添加网格，比如 this .

Answer 1

我找到了这个 codepen by Jason Delia ，将其插入您的 gridster 即可。

当然你必须改变背景颜色，但它应该做你需要的:

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #434343;
  background-image: linear-gradient(#434343, #282828);
}

#content {
  background-color: transparent;
  background-image: linear-gradient(0deg,  transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), 
                    linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  height: 100%;
  background-size: 50px 50px;
}

<div id="content"></div>