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
3
votes
0 answers

isotope with layoutmode packery

I'm using laravel 5.4 and I want some items to show using Isotope with layoumode packery. I entered the commands below in my terminal without any errors: npm install isotope-layout npm install isotope-packery I'm initialising isotope like this: var…
user936965
3
votes
1 answer

Force item to always be in last position using Packery

I want to force a grid item to always be in the last position even after moving items around. I am thinking a good approach would be to //get the total number of items var totalItems = $('.grid-item').length; //adjust the .last item to be the last…
c01gat3
  • 538
  • 3
  • 14
3
votes
1 answer

Masonry grid with triangles?

Is it possible to create a masonry grid such as Packery but using triangles either done via CSS or SVG's? I'm able to do this successfully, however aligning the triangles next to each other so there's no gaps seems to be a challenge. I have the…
Sygon
  • 212
  • 3
  • 15
3
votes
0 answers

Packery with Bootstrap Grid

I'm trying to use Packery to build a dashboard with draggable widgets (using Draggabilly for dragging). The widgets have their width determined by Bootstrap classes, as to be responsive over various screen sizes. I'm also using jQuery to grab…
bosticko
  • 633
  • 8
  • 20
3
votes
1 answer

Packery Save order and reuse the order

Can anyone help me how to save the order of a packery elements while dragging. and then reorder the packery items in the saved order.? here is the code I used before
Debugger
  • 481
  • 3
  • 21
3
votes
2 answers

Angularjs with Packery.js

Trying to get Packery.js working with an angularjs app I'm working with. For some reason they don't seem to play nice together. I thought it might be resolved with the isInitLayout false setting however, still no love. Here is my (bootstrap 3)…
flashpunk
  • 783
  • 2
  • 13
  • 38
3
votes
1 answer

JQuery Packery Center Items

In my JQuery Packery app I want to center my items inside the container element. I use the following structure:
...
...
...
...
I used…
user2722142
2
votes
1 answer

responsive Masonry/Packary overlaps over other images and DOM elements

I have been working on several things related to this for hours now. I finally got it to work, but somehow it broke again. So here I am. For my use-case I want to display images with Packery. The images have to sort themselves so that the grid has…
Devinloper
  • 156
  • 12
2
votes
0 answers

Packery + Infinite Scroll: Stacked Items after loading new items

I'm using Packery and Infinite Scroll plugins to load new items within masonry list. I'm using this code on load document $(window).load(function() { var $container = $("#container1"); $container.packery({ itemSelector: ".box1" …
gpap13
  • 217
  • 1
  • 3
  • 11
2
votes
2 answers

Jquery UI can't drag from left to right side

On my page I'm using the Jquery UI extension to sort divs. The divs are arranged in 2 columns. I created a JS Bin, please take a look on it. When you drag all 3 divs to the left side, you can't get them on the right side again. Where is the…
MyNewName
  • 905
  • 1
  • 13
  • 29
2
votes
1 answer

1px gap using Isotope Masonry (or Packery) expecialy on Safari

i'm sorry for my english. It's many days that i try to figure out an issue that i see trying to create a responsive fullwidth grid of images. To create this grid I'm using Isotope with Masonry Layout (http://isotope.metafizzy.co/) or Packery…
Manuel Ragazzini
  • 839
  • 1
  • 8
  • 23
2
votes
0 answers

Make packery.js rows equal height

I'm trying to implement packery.js to display a grid of various elements which works so far. The elements height varies, so when a single element in the grid is larger than others, elements from the next row 'dock' onto elements from the first row.…
Pascal Raszyk
  • 2,058
  • 2
  • 22
  • 40
2
votes
1 answer

VueJS listening custom events?

And I'm trying to figure out how to get Vue listen for custom events (drag and drop). for instance I need to run this event: pckry.on( 'layoutComplete', function( ) { pckry.layout(); }); Packery lib…
Kirill Monocle
  • 77
  • 6
2
votes
1 answer

Understanding the placement of closing tags

I need help understanding why the first set of code works, whereas the second code doesn't. In the first set of code, I am able to drag and drop elements and still have them in Packery flow when dragging, which is the result of the tree.packery()…
blurgoon
  • 335
  • 2
  • 13
2
votes
2 answers

Packery + ajax loaded content + relayout packery

I am creating a layout with the Packery library from Metafizzy where i list post titles and thumbnails. Once these are clicked, I am hiding the initial content, and then ajax load the rest of the post to replace that initial content. I am looking…
knutagard
  • 87
  • 1
  • 13
1
2
3
…
10 11