javascript - 当第一个 div 宽度较大时，Passy/Masonry 单列

Question

我正在使用由 passy 创建的 Angular masonry 指令，当第一个元素的宽度几乎达到 100% 时我遇到了问题。在这种情况下，所有元素都合并在一个列中，否则我认为行为没问题。

我创建了一个 plunker，看看是否有人可以帮助我。 http://plnkr.co/edit/P8kVidzDV97U7mslECJJ?p=preview

<div ng-controller="CarOperatingPanelCtrl">
    <div class="one-column">
        <div class="two-column">
            <label class="item item-input item-stacked-label">
                <span class="input-label"> Width:</span>
                <input type="number" ng-model="carOperatingPanel.width" value="{{carOperatingPanel.width}}" placeholder="mm" />
            </label>
        </div>
        <div class="two-column">
            <label class="item item-input item-stacked-label">
                <span class="input-label"> Height:</span>
                <input type="number" ng-model="carOperatingPanel.height" value="{{carOperatingPanel.height}}" placeholder="mm" />
            </label>
        </div>
    </div>
    <ul class="draggable-objects">
        <li ng-repeat="obj in draggableObjects">
            <div ng-drag="true" ng-drag-data="obj" data-allow-transform="true"> {{obj.name}} </div>
        </li>
    </ul>

    <div masonry check-last ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
        <div class="masonry-brick" ng-repeat="obj in droppedObjects1"
             flexible-dimensions
             ng-drag="true" 
             ng-drag-data="obj" 
             ng-drag-success="onDragSuccess1($data,$event)" 
             >
        {{obj.name}}
        </div>
    </div>

 angular.module('starter', ['ngDraggable','wu.masonry'])
.controller('CarOperatingPanelCtrl', function ($scope ) {

$scope.carOperatingPanel = {};
$scope.carOperatingPanel.width = 100;
$scope.carOperatingPanel.height = 200;

$scope.draggableObjects = [{ name: '1', width: 20, height: 20 },
    { name: '2', width: 20, height: 20 },
    { name: '3', width: 20, height: 20 },
    { name: '4', width: 20, height: 20 },
    { name: '5', width: 20, height: 20 },
    { name: '6', width: 20, height: 40 },
    { name: '7', width: 40, height: 20 },
    //{ name: '8', width: 80, height: 40 }
];
$scope.droppedObjects1 = [{ name: '8', width: 80, height: 40 }];

$scope.onDropComplete1 = function (data, evt) {

    var index = $scope.droppedObjects1.indexOf(data);
    if (index == -1)
        $scope.droppedObjects1.push(data);
}
$scope.onDragSuccess1 = function (data, evt) {

    //debugger;
    //console.log("133", "$scope", "onDragSuccess1", "", evt);
    var index = $scope.droppedObjects1.indexOf(data);
    if (index > -1) {
        $scope.droppedObjects1.splice(index, 1);
    }
}
var inArray = function (array, obj) {
    var index = array.indexOf(obj);
}

})
.directive('flexibleDimensions', function ($document) {
return function (scope, element, attr) {

    element.css({
        //0,1cm 1mm
        'margin': (((element.parent()[0].offsetWidth * 1) / scope.carOperatingPanel.width) / 2) + 'px',
        width: ((element.parent()[0].offsetWidth * scope.obj.width) / scope.carOperatingPanel.width) + 'px',
        height: ((element.parent()[0].offsetHeight * scope.obj.height) / scope.carOperatingPanel.height) + 'px'
    });

};
});

我使用 ngDraggable 将元素推送到放置区域并重新组织它们。为了更好地理解默认情况下我已经选择了最大的 div。

如果有人看到不应该出现的东西，请告诉我。谢谢

Answer 1

如所述here ，Angular JS Masonry 指令使用第一个元素的大小来计算默认列宽，除非存在 column-width 属性。我不知道你到底想达到什么目的，但你可能想尝试设置该属性以使列宽保持不变。