गतिशील रूप से बदलती ऊंचाइयों के लिए कोणीय जेएस चिनाई

Question

मेरे पास क्लिक होने पर विस्तार और अनुबंध divs है। चिनाई पुस्तकालय ने पेज को शुरू करने के लिए बहुत अच्छा काम किया है। जिस समस्या का मैं अनुभव कर रहा हूं वह यह है कि चिनाई से पूर्ण स्थिति और नीचे दिए गए निर्देश के साथ, जब divs का विस्तार होता है तो वे नीचे divs के साथ ओवरलैप करते हैं। मुझे विस्तार से निपटने के लिए विस्तारित div आगे बढ़ने के नीचे divs होना चाहिए।

मेरे स्रोत हैं: http://masonry.desandro.com/

और

https://github.com/passy/angular-masonry/blob/master/src/angular-masonry.js

/*! 
* angular-masonry <%= pkg.version %> 
* Pascal Hartig, weluse GmbH, http://weluse.de/ 
* License: MIT 
*/ 
(function() { 
    'use strict'; 

angular.module('wu.masonry', []) 
.controller('MasonryCtrl', function controller($scope, $element, $timeout) { 
    var bricks = {}; 
    var schedule = []; 
    var destroyed = false; 
    var self = this; 
    var timeout = null; 

    this.preserveOrder = false; 
    this.loadImages = true; 

    this.scheduleMasonryOnce = function scheduleMasonryOnce() { 
    var args = arguments; 
    var found = schedule.filter(function filterFn(item) { 
     return item[0] === args[0]; 
    }).length > 0; 

    if (!found) { 
     this.scheduleMasonry.apply(null, arguments); 
    } 
    }; 

    // Make sure it's only executed once within a reasonable time-frame in 
    // case multiple elements are removed or added at once. 
    this.scheduleMasonry = function scheduleMasonry() { 
    if (timeout) { 
     $timeout.cancel(timeout); 
    } 

    schedule.push([].slice.call(arguments)); 

    timeout = $timeout(function runMasonry() { 
     if (destroyed) { 
     return; 
     } 
     schedule.forEach(function scheduleForEach(args) { 
     $element.masonry.apply($element, args); 
     }); 
     schedule = []; 
    }, 30); 
    }; 

    function defaultLoaded($element) { 
    $element.addClass('loaded'); 
    } 

    this.appendBrick = function appendBrick(element, id) { 
    if (destroyed) { 
     return; 
    } 

    function _append() { 
     if (Object.keys(bricks).length === 0) { 
     $element.masonry('resize'); 
     } 
     if (bricks[id] === undefined) { 
     // Keep track of added elements. 
     bricks[id] = true; 
     defaultLoaded(element); 
     $element.masonry('appended', element, true); 
     } 
    } 

    function _layout() { 
     // I wanted to make this dynamic but ran into huuuge memory leaks 
     // that I couldn't fix. If you know how to dynamically add a 
     // callback so one could say <masonry loaded="callback($element)"> 
     // please submit a pull request! 
     self.scheduleMasonryOnce('layout'); 
    } 

    if (!self.loadImages){ 
     _append(); 
     _layout(); 
    } else if (self.preserveOrder) { 
     _append(); 
     element.imagesLoaded(_layout); 
    } else { 
     element.imagesLoaded(function imagesLoaded() { 
     _append(); 
     _layout(); 
     }); 
    } 
    }; 

    this.removeBrick = function removeBrick(id, element) { 
    if (destroyed) { 
     return; 
    } 

    delete bricks[id]; 
    $element.masonry('remove', element); 
    this.scheduleMasonryOnce('layout'); 
    }; 

    this.destroy = function destroy() { 
    destroyed = true; 

    if ($element.data('masonry')) { 
     // Gently uninitialize if still present 
     $element.masonry('destroy'); 
    } 
    $scope.$emit('masonry.destroyed'); 

    bricks = []; 
    }; 

    this.reload = function reload() { 
    $element.masonry(); 
    $scope.$emit('masonry.reloaded'); 
    }; 


}).directive('masonry', function masonryDirective() { 
    return { 
    restrict: 'AE', 
    controller: 'MasonryCtrl', 
    link: { 
     pre: function preLink(scope, element, attrs, ctrl) { 
     var attrOptions = scope.$eval(attrs.masonry || attrs.masonryOptions); 
     var options = angular.extend({ 
      itemSelector: attrs.itemSelector || '.masonry-brick', 
      columnWidth: parseInt(attrs.columnWidth, 10) || attrs.columnWidth 
     }, attrOptions || {}); 
     element.masonry(options); 
     var loadImages = scope.$eval(attrs.loadImages); 
     ctrl.loadImages = loadImages !== false; 
     var preserveOrder = scope.$eval(attrs.preserveOrder); 
     ctrl.preserveOrder = (preserveOrder !== false && attrs.preserveOrder !== undefined); 

     scope.$emit('masonry.created', element); 
     scope.$on('$destroy', ctrl.destroy); 
     } 
    } 
    }; 
}).directive('masonryBrick', function masonryBrickDirective() { 
    return { 
    restrict: 'AC', 
    require: '^masonry', 
    scope: true, 
    link: { 
     pre: function preLink(scope, element, attrs, ctrl) { 
     var id = scope.$id, index; 

     ctrl.appendBrick(element, id); 
     element.on('$destroy', function() { 
      ctrl.removeBrick(id, element); 
     }); 

     scope.$on('masonry.reload', function() { 
      ctrl.scheduleMasonryOnce('reloadItems'); 
      ctrl.scheduleMasonryOnce('layout'); 
     }); 

     scope.$watch('$index', function() { 
      if (index !== undefined && index !== scope.$index) { 
      ctrl.scheduleMasonryOnce('reloadItems'); 
      ctrl.scheduleMasonryOnce('layout'); 
      } 
      index = scope.$index; 
     }); 
     } 
    } 
    }; 
}); 
}()); 

Answer 1

कई गैर कोणीय पुस्तकालयों के साथ की तरह, यह प्रतीत होता है इस सवाल का जवाब एक कोणीय निर्देश में पुस्तकालय लपेटकर में निहित है।

मैं इसे बाहर की कोशिश की नहीं है, लेकिन ऐसा लगता है कि क्या this person did

Answer 2

आप उपयोग कर सकते हैं के कोणीय $ फेंकना, $ प्रसारण, और $ कार्यक्षमता पर।

अपने masonry निर्देश लिंक समारोह के अंदर:

scope.$on('$resizeMasonry', ctrl.scheduleMasonryOnce('layout'));

अपने masonryBrick निर्देश लिंक समारोह या किसी अन्य चाइल्ड तत्व के अंदर:

scope.$emit('$resizeMasonry');

उपयोग $ एक घटना भेजने की फेंकना स्कोप पेड़ और स्कोप पेड़ के नीचे एक घटना भेजने के लिए $ प्रसारण।