Stack Overflow
Stack Overflow

Questions tagged [packery]

Packery is a pure JavaScript/jQuery layout library that intelligently lays out elements so as to fit them into as small a space as possible.

Packery is a JavaScript layout library that uses a bin-packing algorithm to fit elements together with as little space between them as possible. This is a fancy way of saying "it fills empty gaps." Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

159 questions
10
votes
1 answer

Packery - how to change layout mode?

I'd like to use this plugin: http://packery.metafizzy.co/ with layout mode: meticulous as described on the frontpage. I went through every page of documentation and cannot find how to set it to meticulous instead of masonry layout which is…
user796443
8
votes
2 answers

Packery appended methods add three items. How to add one item?

I'm try to add dynamically packery item by click method. All every thing is working fine except on a single click packery add three new items. My question is how to add one item on single click? Method Demo Thanks. Edit After page load grid items is…
Rahul
  • 1,845
  • 1
  • 13
  • 25
7
votes
1 answer

Determine the alignment order of the items with packery

This is my codepen: http://codepen.io/helloworld/pen/JoKmQr Lets assume I get an array of data from the server. The data has a title and an order number. I have 5 array items with orderNumber from 1 to 5. Now I want to layout 5 divs where each div…
HelloWorld
  • 4,100
  • 11
  • 38
  • 64
7
votes
1 answer

angular, nested repeat breaking directive (packery + dragabilly)

I am having a slight issue with using dragabilly in angular, the problem is odd because it was working until I made some changes to how the content using packery is loaded in, specifically adding a level of nested repeats. When I do this, packery…
ajmajmajma
  • 11,766
  • 18
  • 67
  • 124
6
votes
1 answer

Using Packery with Angular 2

I can't seem to get Packery working with Angular 2 using angular-cli and typescript 2.0. I'm using Packery 1.4.1 and the typescript definitions for that version from DefinitelyTyped. The issue is that the Packery reference to Outlayer cannot be…
Mikael Kristensen
  • 224
  • 1
  • 13
6
votes
1 answer

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…
dottodot
  • 1,110
  • 1
  • 11
  • 20
6
votes
1 answer

Packery when drag then drop an item vertically in a sortable grid, vertical alignment breaks

I'm having an issue when trying to use packery and draggabilly to create a sortable grid of items. I've also tried jquery ui dragabble and the issue remains. When I drag and drop the item it is possible to break the vertical alignment so the item…
user3919992
  • 61
  • 2
6
votes
3 answers

Masonry / Isotope / Packery Images Loaded + Web Fonts

I am using Packery.js [ http://packery.metafizzy.co/ ] on a site and am having a few layout issues on page load. I have looked at the documentation for Masonry, Isotope, and Packery (all very similar plugins, all developed by David DeSandro) and it…
beefchimi
  • 1,222
  • 2
  • 15
  • 34
5
votes
3 answers

Pinterest Style Layout with CSS, but stacked horizontally instead of vertically

I'm trying to create a pinterest style layout without using Packery or any JS. I've tried using CSS3 columns, but they stack vertically. See the fiddle here , https://jsfiddle.net/2otpzbgt/1/ column-count: 3; is what I've used and the cards are…
melvindidit
  • 410
  • 2
  • 5
  • 15
5
votes
3 answers

How to save the sort order?

I have created Demo by using packery and draggabilly where I have five grids.I can sort them using the draggable.After I make my sort.I need to save the sorted grid.Here the grids are not moving when I inspect in dev only the position is changing…
Raviteja
  • 3,257
  • 21
  • 32
  • 59
4
votes
1 answer

MeteorJS and Packery layout doesn't re-render when collection is updated

I'm integrating MeteorJS collection with Packer for a Pinterest-like interface. I'm having an issue that when a new item is added to the collection which is rendered by Packery (or Masonry, same issue), the new item just floats on top left of the…
Victor S
  • 4,810
  • 5
  • 40
  • 62
4
votes
0 answers

Draggabilly and Packery highlight drop area

My question relates to a excellent javascript library called packery which I am using to create a masonry style layout. I am also using a sister script called draggabilly to allow the user to drag and drop (reorder) the items in the page. Currently…
Jeffrey Jenkinson
  • 2,296
  • 2
  • 19
  • 26
4
votes
1 answer

Packery Horizontal Layout Problems

Hoping that someone out there has some experience with packery, which I'm using for a project. I cannot get the horizontal layout to work. Declaring the packery object in HTML seems to work somewhat.
orcsab
  • 51
  • 3
4
votes
1 answer

Can I hack Packery.js to create circular bin packing?

this is implemented in python (more tests) I'm interested in a result like in the image above (implemented in python) using the Packery.js jQuery plugin for js/DOM based bin packing. Packery is built to work from left to right, top to bottom, but I…
Mushon
  • 81
  • 8
3
votes
1 answer

How to add dynamiclly VueJS component to packery?

Hi I got a problem with packery. Based on this solution https://codepen.io/Monocle/pen/ZbeBGL I have every grid-item as a component and then in app.js (main file) im initializing packery based on example given. var pckry = new Packery(container,…
Canor
  • 689
  • 7
  • 22
1
2 3
…
10 11