EzDev.org

Masonry

Masonry - Harness the power of AutoLayout NSLayoutConstraints with a simplified, chainable and expressive syntax. Supports iOS and OSX Auto Layout


Window orientationchange event in Angular

Is there a way to call the orientationchange event inside an AngularJS directive?

I'm currently working with angular-masonry and I'm trying to update/refresh masonry when the orientation of the mobile device changes.

I've found this but I'm wondering how to do this with the $window service inside Angular

window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  console.log(window.orientation);
}, false);

Source: (StackOverflow)

Masonry/Pinterest columns using React Native

Is there some way to use flexbox in React Native to achieve a Masonry / Pinterest style columns?


Source: (StackOverflow)

Implementing Angular Masonry for Videos instead of images

I have to use angular masonry grid styles for videos instead of images, I referred most of the angular masonry docs and all I could find is it of using for images.I replaced the img tag and used video tag but still it doesn't seems working.Can anyone help me out how to include videos.


Source: (StackOverflow)

Horizontal masonry layout with flexbox CSS only [duplicate]

This question already has an answer here:

I'm trying to create a horizontal masonry layout using only CSS and flexbox. The problem I'm having is there are vertical gaps between the elements, without using align-left: stretch; is it possible to close the gaps?

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  align-items: flex-start;
}


.card {
  width: 25%;
  flex: 1 0 auto;
}

full codepen here


Source: (StackOverflow)

Masonry with full-width items

I am having an issue with Masonry where if I need one element to be 100% width and the rest to be 50% width, the layout no longer puts my elements adjacent to each other. What I would like is for the items to show up side-by-side like they do when there is no 100%-width element.

Here's a js fiddle: https://jsfiddle.net/ubmf47s4/2/

    <div id="boxes" class="masonry clearfix">
    <div class="box box-fw" style="background: cyan;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: magenta;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: yellow;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: grey;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
</div>

.box{
    width: 50%;
    box-sizing:border-box;
}

.box-fw{
   width:100%
}

    $(function(){
    var container = $('#boxes');

    container.imagesLoaded(function(){  
        //console.log( "Images loaded!" );
        container.masonry({
           itemSelector: '.box',
            isAnimated: true
        });
    });
});

Source: (StackOverflow)

Javascript callback after instagram embeds have loaded?

I'm attempting to tile multiple Instagram embeds with Masonry. Problem is the instagram embeds change sizes after loading so the layout leaves gaps.

Is there a callback that i can use when all instagram embeds on the page have loaded? I'm thinking i should trigger masonry again after the Instagram embeds have loaded and resized properly

tried $(document).ajaxStop() didn't work


Source: (StackOverflow)

Centering elements in isotope

Hello everyone and I hope you're doing well. I am using Isotope and below you can see the JavaScript that I have written. I find it impossible to center li elements if they are the Isotope elements. To see what I mean by centering, please see the images below. I've managed to center the whole Isotope to the screen but I need the elements to be centered too and not just float to the left side.

Let's start with my script code:

<script>
 $(document).ready(function(e) {
    $(".ullist li").addClass('element-item');
});

</script> 
<script>
$(document).ready(function(e) {
// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  //layoutMode: 'fitRows',
});
//$('.grid').isotope({ layoutMode : 'fitRows' });
// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};

// bind filter button click
$('#filters').on( 'click', 'a', function() {
  var filterValue = $( this ).attr('data-filter');
  // use filterFn if matches value
  filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});

// change is-checked class on buttons
$('.secmenu ul a').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'a', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});});
</script> 
<script>
$(function(){

  var $container = $('.grid'),
      $body = $('body'),
      colW = 20,
      columns = null;

  $container.isotope({
    // disable window resizing
    resizable: true,
    masonry: {
      columnWidth: colW,
        isFitWidth: true
    }
  });

  $(window).smartresize(function(){
    // check if columns has changed
    var currentColumns = Math.floor( ( $body.width() -10 ) / colW );
    if ( currentColumns !== columns ) {
      // set new column count
      columns = currentColumns;
      // apply width to container manually, then trigger relayout
      $container.width( columns * colW )
        .isotope('reLayout');
    }

  }).smartresize(); // trigger resize to set container width

});
</script>

Basic HTML structure:

    <ul class="ullist grid">
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
      </ul>

Isotope works pretty well with no issues (so far). This is my current layout: enter image description here

And this is the desired layout. enter image description here

I even checked here and tried to use David DeSandro's repository but with no success. So please guys can you help me here to achieve the layout above? Thank you all in advance.

jQuery isotope centering


Source: (StackOverflow)

Masonry Grid Continuous Loop Scroll

So I'm trying to achieve a continuous loop effect on a page that contains a masonry grid.

Basically I have a full page masonry grid that I want to loop on scroll up or down.

Currently I have this:

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer',
  percentPosition: true,
  transitionDuration: 0
});
$grid.imagesLoaded().progress(function(imgLoad, image) {
  var $item = $(image.img);
  $item.addClass('loaded');
  $grid.masonry('layout');
});

var origDocHeight = document.body.scrollHeight;

$(".grid").contents('.grid-item').clone().appendTo(".grid");
$grid.masonry('layout');

$(document).scroll(function() {
  var scrollWindowPos = $(document).scrollTop();
  console.log(scrollWindowPos);
  console.log(origDocHeight);
  if (scrollWindowPos >= origDocHeight) {
    $(document).scrollTop(0);
  } else if (scrollWindowPos == 0) {
    $(document).scrollTop(origDocHeight);
  }
});

You can see what I currently have put together here:

http://codepen.io/tenold/pen/eZbWOW

I think I'm close. I think the hard part is that Masonry starts at the top with all items flush to the top of the screen, and obviously it's not that even at the bottom.

I'm curious if there is a way to do this where Masonry kind of starts from the middle and lays out grid items up and down? I know they have an "originTop" option that could work maybe combining two masonry grids?

If what I'm trying to achieve is confusing, just please let me know and I can try to better explain.

I started with some of the loop code from here: Continuous Looping Page (Not Infinite Scroll)


Source: (StackOverflow)

Cannot get Masonry-Rails Gem to work in my app

so I have scoured stackoverflow and found some similar articles but nothing has worked for me yet. I am creating a rails app and I want to use the Masonry for my layout. I have tried uploading the js as described in this post, but I could not get it to work no matter how many times I tried (yes I matched all the correct IDs and classes). I know the gem is working because the CSS is loading fine, I just cant get the JS to work. Here is what I have at the moment

Gemfile:

# masonry layout
gem 'masonry-rails'

application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree . 
//= require masonry/jquery.masonry  

index.html.erb:

<div class="center">

<div id="masonry-container" class="transitions-enabled infinite-scroll clearfix">
    <%= render @products %>
</div>

    <div class="paginator">
    <%= will_paginate @products, renderer: BootstrapPagination::Rails %>
    </div>
</div>

_products.html.erb

<div class="box">
<% gfyid = product.gfy.to_s.gsub("http://gfycat.com/", "") %>
<h2><%= product.name %></h2>
<div class="gfySize">
    <div class="gfyitem" data-title=false data-autoplay=false data-controls=false data-expand=false data-id="<%= gfyid %>"></div>
</div>

I am so lost, I have been working on this for hours trying everything. The CSS is working/looking fine but I am just struggling with the js. Would appreciate any help thank you so much!


Source: (StackOverflow)

Masonry Events: Call event after imagesLoaded and layoutComplete

So here's what I'm trying to do. I have a grid with a lot of images, so I'm using the imagesLoaded library along with masonry.

Here's my CSS:

.grid {
    opacity:0;
}

And HTML:

<div class="grid">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
    <div class="item">image</div>
    <div class="item">image</div>
    <div class="item">image</div>
</div>

And here's my JS:

var $container = $('.grid');
// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
    $container.masonry({
        columnWidth: '.grid-sizer',
        itemSelector: '.item',
        gutter: '.gutter-sizer'
    });
    $container.masonry('on', 'layoutComplete', function(){
        console.log('got here');
        $container.animate({'opacity':1});
    });
});

My goal is to have the grid hidden until all images are load and the layout is complete, and then fade it in. For some reason in my code above, it's never getting into the on layoutComplete block.

If I move that block outside of imagesLoaded, $container.masonry is undefined that point.

Any ideas?

FIDDLE HERE

If you change the grid opacity to 1 you can see everything is getting laid out fine. Just trying to figure out how to get the layoutComplete to call to set the opacity to 1.


Source: (StackOverflow)

Getting Packery / Masonry to work with angular2

I'm trying to get Packery / Masonry to work on a component. Packery is detecting the container but giving it a height of zero suggesting the content hasn't loaded even though I'm using imagesLoaded. I've tried using various lifecycle hooks but they all have the same result so bit lost as to where I'm going wrong.

import {BlogService} from './blog.service';
import {Blog} from './blog.model';
import {Component, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import {LinkyPipe} from '../pipes/linky.pipe';

declare var Packery: any;
declare var imagesLoaded: any;

@Component({
  moduleId: module.id,
  selector: 'blog',
  templateUrl: 'blog.component.html',
  providers: [BlogService],
  pipes: [LinkyPipe]
})

export class BlogComponent implements OnInit, AfterViewInit {
  blogs: Blog[];
  errorMessage: string;
  constructor(private _blogService: BlogService, public element: ElementRef) { }
  ngOnInit() {
    this.getBlogs();
  }

  ngAfterViewInit() {
    let elem = this.element.nativeElement.querySelector('.social-grid');
    let pckry;
    imagesLoaded(elem, function(instance) {
      console.log('loaded');
      pckry = new Packery(elem, {
        columnWidth: '.grid-sizer',
        gutter: '.gutter-sizer',
        percentPosition: true,
        itemSelector: '.social-card'
      });
    });
  }

  getBlogs() {
    this._blogService.getPosts()
      .subscribe(
      blogs => this.blogs = blogs,
      error => this.errorMessage = <any>error);
  }
}

Source: (StackOverflow)

Masonry vertical fill before horizontal

I'm building a masonry grid which needs to have the following output:

Idea for masonry grid

But the problem is masonry is going to fill horizontal space first and after that it's going to fill the vertical spacing. So the first part is going good with masonry but the second part isn't.

Item 4 and item 5 are going to be placed next to each other and item 6 is going to be set below it.

The width of my container needs to be 100% and the items need to be fluid. So I'm using a percentage grid. I can't stick with a fixed one!

I've already tried the following:

http://output.jsbin.com/zojivodosu

As you can see in that jsbin the problem persists there. Is there anyway I can fill out vertical space and after that horizontal space?

I don't want to customize my HTML if that's possible. Thanks in advance.

Kind regards,

Wouter


Source: (StackOverflow)

Push down bottom div when slideDown with multiple columns and rows

I have multiple items organized in multiple columns and rows

 <div class="items">
    <div class="item-1">
    <div class="item-2">
    <div class="item-3">
    <div class="item-4">
    <div class="item-5">
    ...
 </div>

I'm using jQuery slidedown to show hide content of each item when clicks. I want to push the bottom content correctly, ie extend the same column to which the object belongs.

Example with basic float:left and width:33%

http://jsfiddle.net/kurtko/4w8n1frr/

I have tried several methods:

1) Using columns with float:left, then insert items changing the order with PHP. From: 1,2,3,4,5,6,7,8,9 to 1,4,7,2,5,8,3,6,9.

http://jsfiddle.net/kurtko/adLL8gmn/

<div class="items">    
 <div class="column>
   <div class="item-1">
   <div class="item-4">
   <div class="item-7">
 </div>
 <div class="column>
   <div class="item-2">
   <div class="item-5">
   <div class="item-8">
 </div>
</div>

This is a good method, but when I use responsive version with one column the order is incorrect.

2) Masonry. Masonry - Isotope has a custom layout mode called 'masonryColumnShift' but in current version 2 is disabled.

http://isotope.metafizzy.co/v1/custom-layout-modes/masonry-column-shift.html

3) Flexbox. Using:

http://jsfiddle.net/kurtko/7cu5jvrr/

.items {    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.item {
   width: 33.3%;
}

Good results but not perfect. When an item changes its height a white space is created below the row.

Any ideas?

Thanks.


Source: (StackOverflow)

AngularJS Masonry for Dynamically changing heights

I have divs that expand and contract when clicked on. The Masonry library has worked great for initializing the page. The problem I am experiencing is that with the absolute positioning in place from Masonry and the directive below, when divs expand they overlap with the divs below. I need to have the divs below the expanding div move down to deal with the expansion.

My sources are: http://masonry.desandro.com/

and

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;
        });
      }
    }
  };
});
}());

Source: (StackOverflow)

Reinitialize Masonry / Isotope after pressing href #/

I am having some troubles with Masonry not beeing initialized. My divs have different heights, so I am using Masonry and Isotope to make them show correctly. All these divs have the class .item

Please see site: http://www.dokfilm.no/ and scroll down to Nyhende.

By pressing either Nyhende or the Plus icon. You can see that the divs are being loaded above each other. Also they are pushed to the back of the page. This is because Masonry is not beeing initialized when pressing the link.

Masonry error not being activated

If you resize the window of the browser you will see that Masonry is being reinitilized and all items are moving themselves directly to the correct positions.

Masonry being loaded correctly

The problem is that Masonry is not being reinitilized by the following:

<a rel='nofollow' href="#/ "title="Artiklar" data-target="#" class="nodec">
   <div class="expander">
        <?php echo '<h1>' . esc_html__( 'Nyhende', 'dokfilm' ) . '</h1>'; ?>
        <img class="open" src="<?php bloginfo('stylesheet_directory'); ?>/img/plus.png" alt="Open">
        <img class="close" src="<?php bloginfo('stylesheet_directory'); ?>/img/minus2.png" alt="Close" />
   </div>
</a>

Here is more PHP if needed. artikler2.php is where the posts are being loaded.

PHP

<div class="clearfix">
    <a id="artikler"></a>
    <section id="artikler" class="section artikler">
        <div class="blacktext">
            <div class="container">
                <div class="col-md-12 solidborderned bittelittpaddingoppned littpaddingned bittelittluft">
                    <a rel='nofollow' href="#/ "title="Artiklar" data-target="#" class="nodec">
                        <div class="expander">
                            <?php echo '<h1>' . esc_html__( 'Nyhende', 'dokfilm' ) . '</h1>'; ?>
                            <img class="open" src="<?php bloginfo('stylesheet_directory'); ?>/img/plus.png" alt="Open">
                            <img class="close" src="<?php bloginfo('stylesheet_directory'); ?>/img/minus2.png" alt="Close" />
                        </div>
                    </a>

                    <div id="event-info" class="text littluft">
                        <div class="row">
                            <div class="col-md-12">                             
                                <?php include 'artikler2.php' ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

PHP

<div id="isotope-list">
        <div class="row">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>               
        <div class="item col-md-6 littluft"> 

                <div class="black content grid lefttext maximg littluft">
                    <a rel='nofollow' href="<?php the_permalink() ?>">
                        <?php if ( has_post_thumbnail() ) { the_post_thumbnail('event_thumb'); } ?>
                    </a>
                    <div class="red padding">
                        <h2 class="whitetext nomargin"><?php the_title(); ?></h2>
                        <span class="whitetext thin"> 
                            <?php the_time('j. F Y') ?>
                        </span><br/>
                        <span class="whitetext thin">
                            <?php
                                $content = get_post_field( 'post_content', get_the_ID() );
                                $content = preg_replace('/<[\/]?b>/i', '', $content);
                                $content_parts = get_extended( $content );
                                echo $content_parts['main'];
                            ?>
                        </span>
                        <div class="whitelink"><a rel='nofollow' href="<?php the_permalink() ?>">Les mer</a></div>
                    </div>
                </div>   
            </a> 

        </div>
        <?php endwhile;  ?>
         </div>
    </div>

PHP Footer

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script>

<script>

(function( $ ) {

    var $container = $('.masonry-container');
    $container.imagesLoaded( function () {
        $container.masonry({
            columnWidth: '.item',
            itemSelector: '.item'
        });
    });

    //Reinitialize masonry inside each panel after the relative tab link is clicked - 
    $('a[data-toggle=tab]').each(function () {
        var $this = $(this);

        $this.on('shown.bs.tab', function () {

            $container.imagesLoaded( function () {
                $container.masonry({
                    columnWidth: '.item',
                    itemSelector: '.item'
                });
            });

        }); //end shown
    });  //end each

})(jQuery);
</script>

Isotope.js

jQuery(function($) {

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts

    $container.imagesLoaded( function() {
        $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector: '.item',
        layoutMode: 'masonry'
    });
});

Any ideas?

Looking forward to hear from you,


Source: (StackOverflow)