How to dynamically render a masonry layout of images, while preserving aspect ratio?

• Masonry

  39 16,231 0.0 HTML

  :love_hotel: Cascading grid layout plugin (by desandro)

Well then take a look at the source code https://github.com/desandro/masonry and build it buy yourself.

• MiniMasonry.js

  2 397 1.7 JavaScript

  Minimalist dependancy free Masonry layout library

Do you know the width/height of your images ? If so you can use https://github.com/Spope/MiniMasonry.js Look for the codepen link in the examples.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• houdini-samples

  2 968 0.0 JavaScript

  Demos for different Houdini APIs

  

There's an implementation from Google in this CSS Houdini samples repo: https://github.com/GoogleChromeLabs/houdini-samples/tree/master/layout-worklet/masonry

• pro-gallery

  3 265 7.8 JavaScript

  Blazing fast & beautiful galleries built for the web

  

Use a library, there are many small issues with these renders and doing them right will make it look much better. My favorite is the pro-gallery https://github.com/wix/pro-gallery/ Disclaimer, I wrote it :)

Suggest a related project