<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="//desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="angular-masonry.js"></script>
<script src="script.js"></script>
<script src="ng-infinite-scroll.js"></script>
<script src="myApp.js"></script>
</head>
<body ng-app="myApp" ng-controller="DemoController">
<div infinite-scroll='loadMore()' infinite-scroll-distance='0'>
<div masonry="" >
<div class="grid">
<div class="masonry-brick grid-item" ng-repeat='image in images'>
<p>{{image}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
var myApp = angular.module('myApp', ['wu.masonry', 'infinite-scroll']);
myApp.controller('DemoController', function($scope) {
$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function() {
var last = $scope.images[$scope.images.length - 1];
for(var i = 1; i <= 8; i++) {
$scope.images.push(last + i);
}
};
});
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #EEE;
max-width: 1200px;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-item {
width: 160px;
height: 120px;
float: left;
background: #D26;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}
.grid-item--gigante {
width: 320px;
height: 360px;
}
.grid-item:hover {
background: #A2C;
border-color: white;
cursor: pointer;
}
(function () {
'use strict';
angular.module('wu.masonry', []).controller('MasonryCtrl', [
'$scope',
'$element',
'$timeout',
function controller($scope, $element, $timeout) {
var bricks = {};
var schedule = [];
var destroyed = false;
var self = this;
var timeout = null;
this.preserveOrder = false;
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);
}
};
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) {
bricks[id] = true;
defaultLoaded(element);
$element.masonry('appended', element, true);
}
}
function _layout() {
self.scheduleMasonryOnce('layout');
}
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')) {
$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)
}, attrOptions || {});
element.masonry(options);
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.reload();
});
scope.$watch('$index', function () {
if (index !== undefined && index !== scope.$index) {
ctrl.scheduleMasonryOnce('reloadItems');
ctrl.scheduleMasonryOnce('layout');
}
index = scope.$index;
});
}
}
};
});
}());
/* ng-infinite-scroll - v1.2.0 - 2015-02-14 */
var mod;
mod = angular.module('infinite-scroll', []);
mod.value('THROTTLE_MILLISECONDS', null);
mod.directive('infiniteScroll', [
'$rootScope', '$window', '$interval', 'THROTTLE_MILLISECONDS', function($rootScope, $window, $interval, THROTTLE_MILLISECONDS) {
return {
scope: {
infiniteScroll: '&',
infiniteScrollContainer: '=',
infiniteScrollDistance: '=',
infiniteScrollDisabled: '=',
infiniteScrollUseDocumentBottom: '=',
infiniteScrollListenForEvent: '@'
},
link: function(scope, elem, attrs) {
var changeContainer, checkWhenEnabled, container, handleInfiniteScrollContainer, handleInfiniteScrollDisabled, handleInfiniteScrollDistance, handleInfiniteScrollUseDocumentBottom, handler, height, immediateCheck, offsetTop, pageYOffset, scrollDistance, scrollEnabled, throttle, unregisterEventListener, useDocumentBottom, windowElement;
windowElement = angular.element($window);
scrollDistance = null;
scrollEnabled = null;
checkWhenEnabled = null;
container = null;
immediateCheck = true;
useDocumentBottom = false;
unregisterEventListener = null;
height = function(elem) {
elem = elem[0] || elem;
if (isNaN(elem.offsetHeight)) {
return elem.document.documentElement.clientHeight;
} else {
return elem.offsetHeight;
}
};
offsetTop = function(elem) {
if (!elem[0].getBoundingClientRect || elem.css('none')) {
return;
}
return elem[0].getBoundingClientRect().top + pageYOffset(elem);
};
pageYOffset = function(elem) {
elem = elem[0] || elem;
if (isNaN(window.pageYOffset)) {
return elem.document.documentElement.scrollTop;
} else {
return elem.ownerDocument.defaultView.pageYOffset;
}
};
handler = function() {
var containerBottom, containerTopOffset, elementBottom, remaining, shouldScroll;
if (container === windowElement) {
containerBottom = height(container) + pageYOffset(container[0].document.documentElement);
elementBottom = offsetTop(elem) + height(elem);
} else {
containerBottom = height(container);
containerTopOffset = 0;
if (offsetTop(container) !== void 0) {
containerTopOffset = offsetTop(container);
}
elementBottom = offsetTop(elem) - containerTopOffset + height(elem);
}
if (useDocumentBottom) {
elementBottom = height((elem[0].ownerDocument || elem[0].document).documentElement);
}
remaining = elementBottom - containerBottom;
shouldScroll = remaining <= height(container) * scrollDistance + 1;
if (shouldScroll) {
checkWhenEnabled = true;
if (scrollEnabled) {
if (scope.$$phase || $rootScope.$$phase) {
return scope.infiniteScroll();
} else {
return scope.$apply(scope.infiniteScroll);
}
}
} else {
return checkWhenEnabled = false;
}
};
throttle = function(func, wait) {
var later, previous, timeout;
timeout = null;
previous = 0;
later = function() {
var context;
previous = new Date().getTime();
$interval.cancel(timeout);
timeout = null;
func.call();
return context = null;
};
return function() {
var now, remaining;
now = new Date().getTime();
remaining = wait - (now - previous);
if (remaining <= 0) {
clearTimeout(timeout);
$interval.cancel(timeout);
timeout = null;
previous = now;
return func.call();
} else {
if (!timeout) {
return timeout = $interval(later, remaining, 1);
}
}
};
};
if (THROTTLE_MILLISECONDS != null) {
handler = throttle(handler, THROTTLE_MILLISECONDS);
}
scope.$on('$destroy', function() {
container.unbind('scroll', handler);
if (unregisterEventListener != null) {
unregisterEventListener();
return unregisterEventListener = null;
}
});
handleInfiniteScrollDistance = function(v) {
return scrollDistance = parseFloat(v) || 0;
};
scope.$watch('infiniteScrollDistance', handleInfiniteScrollDistance);
handleInfiniteScrollDistance(scope.infiniteScrollDistance);
handleInfiniteScrollDisabled = function(v) {
scrollEnabled = !v;
if (scrollEnabled && checkWhenEnabled) {
checkWhenEnabled = false;
return handler();
}
};
scope.$watch('infiniteScrollDisabled', handleInfiniteScrollDisabled);
handleInfiniteScrollDisabled(scope.infiniteScrollDisabled);
handleInfiniteScrollUseDocumentBottom = function(v) {
return useDocumentBottom = v;
};
scope.$watch('infiniteScrollUseDocumentBottom', handleInfiniteScrollUseDocumentBottom);
handleInfiniteScrollUseDocumentBottom(scope.infiniteScrollUseDocumentBottom);
changeContainer = function(newContainer) {
if (container != null) {
container.unbind('scroll', handler);
}
container = newContainer;
if (newContainer != null) {
return container.bind('scroll', handler);
}
};
changeContainer(windowElement);
if (scope.infiniteScrollListenForEvent) {
unregisterEventListener = $rootScope.$on(scope.infiniteScrollListenForEvent, handler);
}
handleInfiniteScrollContainer = function(newContainer) {
if ((newContainer == null) || newContainer.length === 0) {
return;
}
if (newContainer instanceof HTMLElement) {
newContainer = angular.element(newContainer);
} else if (typeof newContainer.append === 'function') {
newContainer = angular.element(newContainer[newContainer.length - 1]);
} else if (typeof newContainer === 'string') {
newContainer = angular.element(document.querySelector(newContainer));
}
if (newContainer != null) {
return changeContainer(newContainer);
} else {
throw new Exception("invalid infinite-scroll-container attribute.");
}
};
scope.$watch('infiniteScrollContainer', handleInfiniteScrollContainer);
handleInfiniteScrollContainer(scope.infiniteScrollContainer || []);
if (attrs.infiniteScrollParent != null) {
changeContainer(angular.element(elem.parent()));
}
if (attrs.infiniteScrollImmediateCheck != null) {
immediateCheck = scope.$eval(attrs.infiniteScrollImmediateCheck);
}
return $interval((function() {
if (immediateCheck) {
return handler();
}
}), 0, 1);
}
};
}
]);
$(document).ready( function() {
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 160
});
$grid.on( 'click', '.grid-item', function() {
// change size of item via class
$( this ).toggleClass('grid-item--gigante');
// trigger layout
$grid.masonry();
});
});