packery

来源： https://stackoverflow.com/questions/27591587/determine-the-alignment-order-of-the-items-with-packery

问题 This question already has answers here : CSS-only masonry layout (2 answers) Closed 2 years ago . 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 appearing as 1, 6, 11 and so on. Is it possible to display as 1, 2, 3?? The purpose I'm trying to solve is a grid layout with dynamic content where images

问题 I'm using Packery on a website and have downloaded imagesLoaded, but still my images overlap on page load. The website can be seen here and my code is as below: $(document).ready(function() { var $container = $container.packery({ itemSelector: "packery-item" }); $container.imagesLoaded( function() { container.packery(); }); }); Any help would be greatly appreciated. EDIT: The html code looks like this: <div class="packery js-packery"> <div class="packery-item item"><img src="imgs/cdg5.jpg"><

问题 I'm using Packery on a website and have downloaded imagesLoaded, but still my images overlap on page load. The website can be seen here and my code is as below: $(document).ready(function() { var $container = $container.packery({ itemSelector: "packery-item" }); $container.imagesLoaded( function() { container.packery(); }); }); Any help would be greatly appreciated. EDIT: The html code looks like this: <div class="packery js-packery"> <div class="packery-item item"><img src="imgs/cdg5.jpg"><

问题 FIDDLE I have a div that is centered using foundation. Inside that div, I have 215 x 215 divs that have background images of the work I've done. I've gotten packery to work just fine. My issue is that I want to center these divs inside their container. But I never know how many divs will be on a single row, so I can't just give them padding because it'll mess up if the image i give the padding to goes to a new row. How can I fix this? Thanks! Here is my HTML <div id="myWork" class="row"> <div

问题 Is there a way to make only part of a Packery/Draggabilly container draggable? Say, only making the .chartHeader in the below example draggable - yet having the overall .chartContainer move as one piece? Currently, only the .chartHeader is draggable and everything else stays behind. I'd like to have everything move at once like one big happy family. Here's a fiddle: http://jsfiddle.net/uD5rG/ Thanks in advance! <div class="chartContainer"> <div class="chartHeader">HEADER</div> <div class=

问题 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 default! var $container = $('#grid_index'); // initialize $container.packery({ itemSelector: '.item', gutter: 0 }); Any ideas? 回答1: To answer my question directly, layout mode "meticulous" is triggered automatically by setting: columnWidth and rowHeight in

问题 I am trying to implement packery in an angularJS application. When I define the items manually one by one (see the commented html code), Packery works fine. When I try to do the same thing with an ng-repeat loop, packery does not work. How can I make packery work with ng-repeat in an angularJS template? The template: <div class="item-container" workspace> <div class="module-sizer"></div> <div class="gutter-sizer"></div> <div ng-repeat="item in items" class="item"> <!--my {{angular content}}

问题 I need to use them in my ember-cli project. How to start? I writed in terminal: bower install isotope --save then in my ember-cli-build.js I added app.import ecc... , but then I don't know what to do. Where to put my intialization script, like this: $('.grid').isotope({ // options itemSelector: '.grid-item', layoutMode: 'fitRows' }); If I put it in application.hbs it give to me an error and when i change route with {{#link-to}} it doesn't work anymore. What to do? In the web there aren't many

问题 I have been trying to trigger the packery animation of resorting the items similar to the page resize. I want the packery items to re-sort when the fullpage slide are switched. I am open to using a different method but I have started down the path of trying to use the fit method, triggered when fullpage.js callbacks "onSlideLeave" and "afterSlideload" happen. My idea was to move one item from the left to the right of the entire grid to force the reshuffle animation. I have created a reduced