in your code, you have this piece:

if(options.resize) {
    $(window).on('resize', {container: this[0]}, function(e){

please scope your events so they wouldn't collide with others code, and change it a little to:

if(options.resize) {
    $(window).on('resize.rowGrid', function(e){
      // do 'layout' for each "this" element
}

BUT, you need to take that resize event outside, and wrap the rest of your initialization code with something like:

$.fn.rowGrid = function( options ) {
    var defaults = {
      minMargin: null,
      maxMargin: null,
      resize: true,
      lastRowClass: 'last-row',
      firstItemClass: null
    };

    return this.each(function(){
        if ( this.length == 0 ) {
          console.error( 'No element found for "' + this.selector + '".' );
          return this;
        }
        if ( this.length > 1 ) {
          return this.each(
            function() {
              $(this).rowGrid( options );
            }
          );
        }

        if(options === 'appended') {
          options = this.data('grid-options');
          var $lastRow = this.children('.' + options.lastRowClass);
          var items = $lastRow.nextAll().add($lastRow);
          layout(this[0], options, items);
        } else {
          options = $.extend( {}, defaults, options );
          this.data('grid-options', options);
          layout(this[0], options);
       }
    })

        if(options.resize) {
        $(window).on('resize.rowGrid', function(e){
            this.each(function(){
                layout(this, options);
            });
        });
    }

       ....
       ....
      // rest of the code
});

Hi,

Thanks for such a good plugin. It works fine. But sometimes the items are not properly margined and placed. I need to refresh it to see it ok.

What could be the reason? any idea? Do we have to apply it after all the images are loaded or something. Thanks in advance for your help.

Mahfuz

hi brunjo.

thx for your great plugin i added last item class. perhapas you can update yours.

` (function($){ $.fn.rowGrid = function( options ) { return this.each(function() { $this = $(this); if(options === 'appended') { options = $this.data('grid-options'); var $lastRow = $this.children('.' + options.lastRowClass); var items = $lastRow.nextAll(options.itemSelector).add($lastRow); layout(this, options, items); } else { options = $.extend( {}, $.fn.rowGrid.defaults, options ); $this.data('grid-options', options); layout(this, options);

    if(options.resize) {
      $(window).on('resize.rowGrid', {container: this}, function(event) {
        layout(event.data.container, options);
      });
    }
  }
});

};

$.fn.rowGrid.defaults = { minMargin: null, maxMargin: null, resize: true, lastRowClass: 'last-row', firstItemClass: null, lastItemClass: null };

function layout(container, options, items) { var rowWidth = 0, rowElems = [], items = jQuery.makeArray(items || container.querySelectorAll(options.itemSelector)), itemsSize = items.length; // read

var containerBoundingRect = container.getBoundingClientRect();
var containerWidth = Math.floor(containerBoundingRect.right - containerBoundingRect.left)-parseFloat($(container).css('padding-left'))-parseFloat($(container).css('padding-right'));
var itemAttrs = [];
var theImage, w, h;
for(var i = 0; i < itemsSize; ++i) {
  theImage = items[i].getElementsByTagName('img')[0];
  if (!theImage) {
    items.splice(i, 1);
    --i;
    --itemsSize;
    continue;
  }
  // get width and height via attribute or js value
  if (!(w = parseInt(theImage.getAttribute('width')))) {
    theImage.setAttribute('width', w = theImage.offsetWidth);
  }
  if (!(h = parseInt(theImage.getAttribute('height')))) {
    theImage.setAttribute('height', h = theImage.offsetHeight);
  }

  itemAttrs[i] = {
    width: w,
    height: h
  };
}
itemsSize = items.length;

// write
for(var index = 0; index < itemsSize; ++index) {
  if (items[index].classList) {
    items[index].classList.remove(options.firstItemClass);
    items[index].classList.remove(options.lastItemClass);
    items[index].classList.remove(options.lastRowClass);
  } else {
    // IE <10
    items[index].className = items[index].className.replace(new RegExp('(^|\\b)' + options.firstItemClass + '|' + options.lastRowClass + '(\\b|$)', 'gi'), ' ');
  }

  rowWidth += itemAttrs[index].width;
  rowElems.push(items[index]);

  // check if it is the last element
  if(index === itemsSize - 1) {
    for(var rowElemIndex = 0; rowElemIndex<rowElems.length; rowElemIndex++) {
      // if first element in row
      if(rowElemIndex === 0) {
        rowElems[rowElemIndex].className += ' ' + options.lastRowClass;
      }
      rowElems[rowElemIndex].style.cssText =
          'width: ' + itemAttrs[index+parseInt(rowElemIndex)-rowElems.length+1].width + 'px;' +
          'height: ' + itemAttrs[index+parseInt(rowElemIndex)-rowElems.length+1].height + 'px;' +
          'margin-right:' + ((rowElemIndex < rowElems.length - 1)?options.minMargin+'px' : 0);
    }
  }

  // check whether width of row is too high
  if(rowWidth + options.maxMargin * (rowElems.length - 1) > containerWidth) {
    var diff = rowWidth + options.maxMargin * (rowElems.length - 1) - containerWidth;
    var nrOfElems = rowElems.length;
    // change margin
    var maxSave = (options.maxMargin - options.minMargin) * (nrOfElems - 1);
    if(maxSave < diff) {
      var rowMargin = options.minMargin;
      diff -= (options.maxMargin - options.minMargin) * (nrOfElems - 1);
    } else {
      var rowMargin = options.maxMargin - diff / (nrOfElems - 1);
      diff = 0;
    }
    var rowElem,
      widthDiff = 0;
    for(var rowElemIndex = 0; rowElemIndex<rowElems.length; rowElemIndex++) {
      rowElem = rowElems[rowElemIndex];
      var rowElemWidth = itemAttrs[index+parseInt(rowElemIndex)-rowElems.length+1].width;
      var newWidth = rowElemWidth - (rowElemWidth / rowWidth) * diff;
      var newHeight = Math.round(itemAttrs[index+parseInt(rowElemIndex)-rowElems.length+1].height * (newWidth / rowElemWidth));
      if (widthDiff + 1 - newWidth % 1 >= 0.5 ) {
        widthDiff -= newWidth % 1;
        newWidth = Math.floor(newWidth);
      } else {
        widthDiff += 1 - newWidth % 1;
        newWidth = Math.ceil(newWidth);
      }
      rowElem.style.cssText =
          'width: ' + newWidth + 'px;' +
          'height: ' + newHeight + 'px;' +
          'margin-right: ' + ((rowElemIndex < rowElems.length - 1)?rowMargin : 0) + 'px';
      if(rowElemIndex === 0) {
        rowElem.className += ' ' + options.firstItemClass;
      }
      if(rowElemIndex == rowElems.length-1) {
        rowElem.className += ' ' + options.lastItemClass;
      }
    }
    rowElems = [],
      rowWidth = 0;
  }
}

} })(jQuery); `

Safari 9.1 for Mac does not seem to "Resize" the grid correctly. When I shrink the browser horizontally, the grid falls apart. When I enlarge the browser horizontally, the grid aligns correctly again.

The "resize" event is fired and the "layout" function is called, but the grid has many holes. I have included a screenshot using the provided demo.

Edit: I had some success by adding a delay (and "throttle") to the "layout" call. The images flicker a bit on resize due to the delay, but the grid remains intact. I'd still love to figure out why Safari does this and whether there's a better solution.

Using floats (in this manner) is considered bad practice. Please use inline-block and if your HTML is not minified, then you will have to hack the container with font-size:0.

Hello,

how to import it to ES6? I'm getting error that jQuery is not defined, but I'm importing it before rowGrid.

This is my import: import $ from "jquery"; import rowGrid from 'rowgrid.js';

Thanks for reply. Ondra

I'm planning to migrate away from jQuery and vanilla-js version of rowGrid seems to be the way to go. @brunjo can you please confirm whether (functionally) these versions are equivalent? Also, I'm suspecting that vanilla-js version would need a separate npm entry to be available from npm, correct?

Hi!

Sorry, if this is not very right place for such report. In fact, rowGrid is embeded in CMS, which I use as the base for my website, but maintainers of CMS said that they can't help me as the problems I facing are likely to be on rowGrid side.

1. First of all rowGrid works great in 99.999% cases when the size of screen is large, lets say 1920px, in most browsers when there is no additional styles applied.

However I have an option when users apply their own branding to their blogs, meaning there is additional CSS in the page code. One of the significant changes (to my mind) is that there is padding: 20px; style added to the div where photoset resides.

Alingment also depends on the screen scale and size, f.i. the picture above I got on all (17", 24") 1920x1080 monitors both in Chrome and Mozilla but with 100% scale. If I set screen zoom to 125% which is default in many Windows systems, it looks a little bit different (but still having this issue with alignment).

2. Secondly I'm still getting this issue, with tiny images but only in Chrome. I have changed this code:

function setRowGrid() {
           $('.js-topic-photoset-list').rowGrid({
               itemSelector: '.topic-photoset-item',
               minMargin: 10,
                maxMargin: 15,
               resize: false,
                lastRowClass: 'topic-photoset-last_row',
               firstItemClass: "first-item"
             });
         }

To this one:

function setRowGrid() {
           $('.js-topic-photoset-list img').load(function () {
               $('.js-topic-photoset-list').rowGrid({
                    itemSelector: '.topic-photoset-item',
                    minMargin: 10,
                    maxMargin: 15,
                    resize: false,
                    lastRowClass: 'topic-photoset-last_row',
                    firstItemClass: "first-item"
               });
             });
         }

And still getting this issue

You need to press referesh several times to reproduce.

However it seems that this problem is now only in Chrome. In FF I wasn't able to get to same results.

You may find that rowGrid.js is not the latest release, but I already tried latest 1.0.3 version and also tried to play with different options like min/max margin, resize, etc. I have test server and I could give you the link to see how it works there. (It's almost the same)

Please help, have now idea what to try else. Any advice would be appreciated......

My current project requires an earlier version of jquery.min.js to work with an off canvas nav panel while rowGrid.js uses a later version of jquery.min.js.

Using both at the same time obviously won't work. Using only the earlier version stops rowGrid.js working and using the version in the RowGrid.js package stops the off canvas nav working.

Oh what to do!

JavaScript/DOM is an extreme performance hit when looping or adding elements--redraw nightmare.

From: http://codepen.io/oklsfo/pen/JDnFG

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

I implemented a filter which simply hides some of the items in the grid using css (display:none)

A css class gets toggled on a container element (ex. body) when this css class is set, some of the items in the grid are set to display:none;

This requires a relayout of the grid. But both the jquery and the javascript version do not relayout the grid. When I remove the items from the dom, then the relayout works.

Hello brunjo,

i like your tool, but i have problems to destroy your resize layout function if i change the view. On mobile i working with a slider, and I want to switch off all functions of row grid.

Thanks a lot :-)

If you have items which are all exactly the same initial width and height, and start resizing their container, then the last row doesn't match, and it looks weird. This is a no-go for my client:

A grid item should always have the same dimensions as the rest, if they are all the same size. maybe it can be added as an option to the plugin.