metafizzy/packery

:bento: Gapless, draggable grid layouts

packery's Issues

Bring Isotope sorting into Packery, or Packery Drag and Drop into Isotope

You've mentioned that you'll bring a packery layout into Isotope, but that seems to target the gap issue and not drag and drop.

If I want the beauty of both drag and drop ordering, with dynamic filtering and sorting at the same time, is there a roadmap for that?

Can I help?

handlebarsjs

Would handlebarsjs work with packery?

http://handlebarsjs.com/

check is object is array in make array

Object.prototype.toString.call( someVar ) === '[object Array]'

Submit packery.js to cdnjs.com

Firstly, super work! I have been waiting a while for this to be released.

Not an issue, but a small ask, but is there any chance to get packery.min.js submitted to: http://cdnjs.com/

Gzipped blocky goodness FTW!

Again, thank you for all the hard work!

Refreshing creates overlap / breaks gutter

I believe this now only happens on iPad (perhaps mobile) - where some (not all) posts seem to ignore the gutter, and stack directly beneath eachother. I think I fixed it on Desktop simply by moving the order of which the imagesLoaded Plugin was loaded (above the packery src) - but it still happens every time on iPad. I do believe it has something to do with the imagesloaded plugin. Strange thing is; this only occurs on refresh - not ever on a first load. On first loads, the layout renders perfectly.

Do you have any clue what I could do to fix this?

Would like jQuery demos

Hi! If you would like a jQuery version of a demo in the docs, please speak up and specify which demo.

empty gaps appear in non-gridded Packery after dragging

See http://codepen.io/desandro/pen/lveqb

1. Drag an item
2. Release
3. As the other items transition to layout, drag the item again, just a little bit

The dragged item will shift to a new position, and in its place will be an empty space.

This does not happen with columnWidth or rowHeight is set

separate options for gutterWidth and gutterHeight

Right now gutter is a single option that controls both the vertical gutter and horizontal gutter between item elements. Having separate options for gutterWidth and gutterHeight would allow you to control these values separately.

Please +1 if you'd like to see this feature.

Performance Tips?

Can you provide tips on how to obtain the greatest performance with this plugin?

Packaged version through bower

Hi, it would be helpful if the package you get through Bower had a packery.​pkgd.​min.js included as well for easy referencing. Finding and specifying the eleven dependancies manually is a bit, well, slow :-)

Packery not rearranging items in IE8

Hi thank you very much for fixing the other problem, could you please also take a look at the homepage, packery is not doing its job for the articles under the slider.
http://new.newzealandweddings.co.nz

Loading packery with requireJS

Hi Desandro,

I am trying to load packery with requireJS, but I keep getting ,,Uncaught TypeError: Cannot read property 'prototype' of undefined " error message, even if packery is not initialized anywhere on the page. That's 486. row of packery.pkgd.js file.
Any help is appreciated. Thanks...

Prevent / Disable "expanded" on click

Hallo,

I want to disable the "expanded" functionality. Currently if I click on a Grid-Block everything move. Want to prevent this.

Is there any option to turn off this functionality?

Thanks in advance!

Cheers,
Matthias

Elements not aligning correctly with responsive layout

On init the images won't align at all, after resize they do.
But in most cases the elements are not aligned correctly. See attached screenshots. I've tried a lot to fix this, but haven't been able to unfortunately. Please send me your IP so I can give you access if you'd like to see it working, it's a closed dev env.

Used JS code:
$usersPack = $('#users-mason').packery({
itemSelector: '.user',
gutter: 0,
isInitLayout: true,
isResizeBound: true
});

Dragged items can overlap

1. When using a multi-touch device, you can drag two items on top of one another
2. When a dragged item is being positioned into place, during its transition, you can drag another item on top of it.

Add a 👍 reaction to this issue if you would like to see this issue fixed. +1 comments will be deleted.

remove method automatically removes element from DOM

The remove method actually does two things:

1. Hides the elements
2. Removes it from the DOM

Perhaps a better API would be two methods .hide() that just hides the element, and .remove() with hides and removes it.

If you would like to see something like this, please +1 and explain your use case.

Is specifying height and width an alternative to imagesLoaded?

Back in isotope or masonry, one can specify the height and width of the image instead of waiting for imagesLoaded. Is that still possible in packery? I tried but it doesn't seem to work so I would like to hear definitively from you.

And by the way, if that could true, is there any difference between the bottom two way in this regard?

img src="x.jpg" width="100px" height="100px"
img src="x.jpg" style="width:100px;height:100px;"

Thanks a lot!

Fluid grid with gutter?

What is the recommended way to implement a fluid grid with a gutter? There can't be any (or at least a minimum for percentage roundings) extra spacing in the grid.

With element sizing for the columns and gutter (plus an extra element) I got it working like this: http://jsfiddle.net/oskarrough/7WB2c/

Although not adviced in the docs I'm using an element in the grid as sizing element for the column width. Seems to work? How could it be improved?

Your licence makes no sense

I think you are very confused by the MIT licence.

If you allow anyone to use this under the MIT licence, they can then re-licence it to anyone else under the MIT licence.

Your terms attempting to restrict it are inoperative, because once it has been recieved under your terms it can be relicenced under restrictionless MIT.

I have no interest in your software, I just hate seeing ridiculous and misleading licencing terms.

Turn Packery On/Off on window size

Hello,

I am just playing around with packery I am trying to get to turn on and off based on the size of the window.

I have it working where if the browser width is re-sized to less than 600px then packery kicks in. I am just having a difficult time that once the user re-sizes the browser back to anything greater than 600px to disable or turn off packery.

I took a look at the on/off methods in the docs but I am just a little confused on how to use them.

This is what I currently have

http://jsfiddle.net/Tjp7a/5/

Any suggestions would be greatly appreciated!

use .unbindResize() in destroy method

How to use reloadItems

Hello,

Just wondering how I can use the reloadItems method? I am trying to get my items to readjust after a user clicks on a link, or after another function finishes.

This is what I currently have: http://jsfiddle.net/trewknowledge/Bp3Gr/

Any ideas?

Appending within viewport

Is there a way to get newly appended items to stack within the current viewport? I'm creating an infinite scroll page where the content vary very in sizes. I've set up a scenario:

http://codepen.io/anon/pen/pmDJz

If you append items, scroll down and keep adding items, you'll see that the new items are appended outside the current view, because they're fitting into available slots further up in the container.

Container div forces border/margin

I'm trying out packery with a full screen layout, but have noticed that when using the plugin the container div always has a border around it (or it's forcing it to be centered somehow)

Is there anyway of getting rid of this (so that the contents are edge to edge)?

save (and reuse) different sort order after dragging

maybe I missed it, is there any way to re-use a different sort order after the user manually drag/dropped elements? (I could store the order in localstorage or save it with an ajax request, but can I apply a different sort order to a packery instance on loading the page)?

Thanks in advance, Michael

Infinite Scroll Integration

Hey there,
I'm trying to make Infinite Scroll (by Paul Irish, https://github.com/paulirish/infinite-scroll) play nice with Packery, while using Packery's appended method, but to no avail. Is it already possible?

breaks in IE8

Hi David,

Just testing out packery it's awsome and am considering it for a commercial licence.

However I'm finding it not working in IE8 on winXP Pro.

Using the latest version...

Getting the following error in IE8:

Message: 'handleEvent' is null or not an object
Line: 142
Char: 5
Code: 0
URI: http://rljr.im/rljr/js/plugins.js

I'm using the example for responsive layouts on code pen to initialise it, here's my reduced case:

http://cdpn.io/qzDmy

and url to test site http://www.rljr.im/rljr

Thanks

Jon

Drag across multiple packery containers

Hi,

Thanks for a fantastic resource, it's a great library without a doubt. One thing I was looking at doing was dragging items across multiple packery containers. Would this be possible or are there any particular blockers you would expect?

Would you have a working example available if you see this as a possibility?

Cheers,

Simon

Vertical drag

When dragging an element with the same width vertically, packery should swap the elements. Now the grid feels out of control when rearranging elements vertically.

Difference between Packery and Isotope

Since isotope was made a long time ago, and many have purchased the license for it (as do I) I wonder - what is the difference between packery and isotope?

from packery point of view it is draggable and fills in the gaps, which isotope has trouble doing.

Should isotope users abandon it and move to packery? Will isotope still be maintained, or will it ever remain in the shadows of its better looking, cooler draggable successor (is packery isotope's successor? or are they destined to rule the bin-packingland side by side?)

Basically, my worry is that isotope will fade from existence since packery is shinier..

I'd love it if you can shed some light on it.

Thanks!

Weird rendering in Chrome (Win 8, x64)

I just implemented Packery as a replacement for Isotope, all works fine with a lot less code except for one thing which seems to trigger an (re)draw bug in Chrome 26.0.1410.64 on Windows 8 64bit with 3d rendering on.

I have a menu bar which has a fixed position on top and a grid-view / portfolio beneath that with Packery. When I scroll down it causes all weird messed up and slow drawing in Chrome. With firefox everything is buttersmooth and works perfectly!

To see the layout I'm using please see: http://maartendeboer.net/portfolio

I expect this is a bug in Chrome, but as it's probably packery related (bug does not occur with Isotope) I thought I'd post it here.

Let me know if there's anything I can do to help!

Mobile & Twitter bootstrap

How compatible is this with Mobile and Twitter Bootstrap?

Dragging item on top of stamped item does not result in item moving off stamp

I'd like to see items dragged on to a stamped item moved off the stamped item upon releasing the item.

Here is a reduced test case

Animations in IE8, IE9

I've noticed that Packery has no fallback for animations when the browser doesn't support CSS transitions. With no support in IE8 or IE9 that makes up quite a large portion of the users (around 21% accoring to StatCounter).

Is there any plan to add a fallback using something like jQuery animations or something along those lines?

The animations as they are make a huge impact on how it feels and without them it's a bit bland at times.

Thanks in advance, love it in all other ways <3

Improve performance

Dr. @paulirish took a look

---

Every .layout() Packery gets the size of every item. This is an expensive task because it triggers a reflow for each item, (hitting getComputedStyle and offsetWidth).

---

queue-up style changes to items, so that item's CSS 'invalidate layout' doesn't happen

Sort Order

Are there any plans to maintain sort order or allow prepending items to packery? This is the only thing that's stopping me from migrating away from isotope at the moment.

Single dragged items remain selected

If there is only a single item in a container and it has been made draggable using Draggabilly, once dragged it remains selected on drop. This is not the case if there are more than one items in the container.

Layout fails on reload

RTC enclosed below as per guidelines.

http://kidiot.com/home2.html

Safari Version 6.0.4 (8536.29.13)

To replicate hit refresh. Nudging screen size will fix layout.

NB - replicated same issue on Chrome and Firefox (actually worse requires a nudge to get layout)

Having issue on IE8

Running v1.0.3 but doesn't work on IE8, the error is:
SCRIPT87: Invalid argument.
packery.pkgd.min.js, line 14 character 17441

Packery 'Fit' Should Not Necessarily Re-order Items

Hi, it would be great if using the 'Fit' Method did not permanently re-order packed elements. This would be useful for when the order of your elements is important to maintain, such as with chronological blog posts. Any way around this? See http://cdpn.io/xIKvg

IE8 - Object doesn't support this action

Hi,

I'm getting the following JS error for IE8:

SCRIPT445: Object doesn't support this action

This seems to relate to the following code:

delete obj[type+fn];

I am using the packaged version: http://packery.metafizzy.co/packery.pkgd.js

Any ideas?

Horizontal layout? (Fixed height/max rows + variable width/unlimited columns)

Is there a way to set a max height of the container or a max number of rows (3n, or 1n+2n, or 1n+1n+1n) and have the content flow horizontally, filling up all rows before moving to the next row?

I can't seem to find anything in the documentation that suggests this is possible.

Centered Layout

Are there any plans to add a "centered" option? Like the "Centered Masonry" in Isotope?

http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html

That's the only thing that's missing for me right now.

Strange layout in Firefox v14

This is not an issue since it's solved but I thought I would still write about it here.

I used Packery on Chrome and Safari. Both worked fine.
I then tried it on Firefox and the layout didn't change dynamically. The items would resize accordingly to the CSS of course but their position would be set and would not respond to the media queries.

Refreshing the page resulted in the layout displaying as expected though.

The problem was solved by updating to the latest version of Firefox.

Isotope filter and sorting documentation still relevant?

Is the filtering and sorting documentation over on the isotope site still relevant for Packery? Or are these features unsupported in Packerty at the moment?

Packing hidden images

This was well documented with Isotope and Masonry so I'm curious as to why the functionality changed in Packery and if it's intentional why it's not documented.

If the images are hidden with display:none, packery is not able to 'pack' the items. This jsFiddle clearly demonstrates the issue. It's dealing with hidden elements, packing them and then showing the elements. They're stacked on top of one another. Removing display:none from the elements fixes the problem.

This is probably just a matter of getting element sizes while hidden. Are you using get-size for this?

Packery and infinitescroll, including draggabilly in the callback

I am using packery with infinitescroll and it works well but I can't get draggabilly to work with the appended elements. I'm sure I am wrong on the callback to include dtaggabilly on the new elements

Packery code:

var $container = $('#container');
var pckry = new Packery( container, {
  // options
  itemSelector: '.item',
  gutter: 10,
  columnWidth: 185,
  rowHeight: 185
});
imagesLoaded( container, function() {
  pckry = new Packery( container );
});
var itemElems = pckry.getItemElements();
// for each item...
for ( var i=0, len = itemElems.length; i < len; i++ ) {
  var elem = itemElems[i];
  // make element draggable with Draggabilly
  var draggie = new Draggabilly( elem );
  // bind Draggabilly events to Packery
  pckry.bindDraggabillyEvents( draggie );
}

my infinite scroll callback:

 function( newElements ) {
     $(newElements).imagesLoaded( function() {
    pckry.appended( newElements ); 
  });
var itemElems = pckry.getItemElements();
// for each item...
for ( var i=0, len = itemElems.length; i < len; i++ ) {
  var elem = itemElems[i];
  // make element draggable with Draggabilly
  var draggie = new Draggabilly( elem );
  // bind Draggabilly events to Packery
  pckry.bindDraggabillyEvents( draggie );
}
}

Packery failed to calculate container height and width?

1. Container Height

I noticed that sometimes Packery failed to calculate the height of DOM container, thus setting it to 0. Is that a bug?

2. Container Width

It seems like Packery perform layoutItems() too soon, before width finished being calculated. Thus, instead of laying out N columns it lays out N-1 columns.

NOTES

• Both cases are intermittent. It's a bit hard to generate test cases.
• Each item inside Packery contains full-width image and we use imagesLoaded callback before calling packery.appended()

I got infinite scrolling works with Packery, but the new elements flashes...

The new elements are placed correctly, but it took 1-2 seconds.

During that time all of the new elements are displayed with position absolute, overlapping on top of existing elements.

How can I get around that? Set visibility hidden until packery.appended() finished?

Manually update packery.columnWidth and .rowHeight

I'd like to manually adjust packery.columnWidth and packery.rowHeight on $(window).resize() but this doesn't seem to be possible. I don't want to set these to element widths/heights. Any suggestions?

Minimum test case: http://cdpn.io/uGbcI