desandro / vanilla-masonry Goto Github PK

[deprecated] Masonry layouts without any frameworks

CSS 38.58% JavaScript 60.36% Shell 1.06%

vanilla-masonry's Introduction

Vanilla Masonry

This project is now deprecated. Masonry v3 supports vanilla JS, without requiring jQuery. Use it!

Masonry is a dynamic grid layout script. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

You might have heard of jQuery Masonry, this is the framework-free version.

This package has all the documentation and demos to get you started.

View this project live at http://vanilla-masonry.desandro.com.

Viewing this project locally

Via download

You can download a zip of all the flat HTML files from http://meta.metafizzy.co/files/vanilla-masonry-site.zip.

Via Jekyll

The documentation and demo pages are generated using Jekyll. With Jekyll installed, you can clone this repo and run Jekyll from Terminal:

git clone https://github.com/desandro/vanilla-masonry.git
cd masonry/
jekyll --server --auto

Then view the live site at http://localhost:4000.

vanilla-masonry's People

Contributors

Stargazers

Watchers

vanilla-masonry's Issues

Add itemSelector option

implement with querySelectorAll, since its supported IE8+

Masonry with variable Height

Hello,

I'm making a web page with vanilla masonry and variable Height (collapsible content), when the content is collapsed, masonry is working, but when I expand it, it push the content, and the others items.
Ps : when i expand it, the style goes directly in the div attribut.
is there a way in Js to put it directly in the css ?

Error when no item elements

Seriously dood.

Error when no container element

I need to check what happens when you initialize Masonry with no container element or an element that isn't there.

2D packing algorithm!!!

I have tried the script with fixed cells (square compositions) ex: http://www.coreindex.com/clips/ and it don't look very good (empty spaces)!!! versus http://www.clipboard.com

Did you use any 2D packing algorithm??
Or! Did i miss some settings or something?

Sorry, I didn't have time to take a look on source code ( v1.0.5)

Thank you in advance,
Pavel

How to get the container by a class?

Hi,

Great to be able to use this. I want it to be used in a drupal web site. I am not controlling the way drupal outputs the content (or at least I don't want to dig in that much). I want to be able to use this:

How could I get the element by it's class instead of ID? Searched all over the internet but, seams no native support is available for any. Can you help me understand how it operates (and by the way, put an example with a class as a container in the main web site).

Thanks,
NR

modal window not trigger in pages appended when using masonry

I don't know what am I doing wrong. I have a site with masonry used and appending pages. The modal window works fine on the first page and individually when i call the 2nd page direct but when it appends using infinite scroll it doesnt work.

this is the first page http://www.spheretekk.com/ych/media-videos.html

this is the second page http://www.spheretekk.com/ych/2.html

Title with 'this modal window doesnt work'..when click on image it doesn't open a modal

Can you please let me know what am I doing wrong

Thank you

Masonry and Infinite Scroll Not Working On Tumblr

Here is my complete code:

<title>{Title}</title> {block:Description}{/block:Description} <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

{block:IndexPage}

{/block:IndexPage}

{Title}

{block:Description}

{description}

{/block:Description}

Home • {block:AskEnabled}Message •{/block:AskEnabled} Archive {block:HasPages}{block:Pages} • {Label}{/block:Pages}{/block:HasPages} {block:SubmissionsEnabled} • {SubmitLabel}{/block:SubmissionsEnabled} • Personal • Dreams

{block:Posts}
{block:Text}

{block:Title}

{Title}

{/block:Title}

{Body}

Permalink {block:NoteCount} · {NoteCount} {/block:NoteCount}· {Timeago}

{/block:Text}

{block:Photo}

{block:IndexPage}

Permalink {block:NoteCount} · {NoteCount} {/block:NoteCount}· {Timeago}

{/block:IndexPage}

{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-500}" {PhotoAlt} border="0"/>{LinkCloseTag}
{block:Caption}

{Caption}

{/block:Caption} {/block:PermalinkPage}

{/block:Photo}

{block:Photoset}

{block:IfNotTwoColumns}{Photoset-250}{/block:IfNotTwoColumns} {block:IfTwoColumns}{Photoset-400}{/block:IfTwoColumns} {block:PermalinkPage} {block:Caption}

{Caption}

{/block:Caption} {/block:PermalinkPage}

{/block:Photoset}

{block:Quote}

"{Quote}" {block:Source}

{Source}

{/block:Source}

Permalink {block:NoteCount} · {NoteCount} {/block:NoteCount}· {Timeago}

{/block:Quote}

{block:Link}

{Name}

{block:Description} {Description} {/block:Description}

Permalink {block:NoteCount} · {NoteCount} {/block:NoteCount}· {Timeago}

{/block:Link}

{block:Chat}

{block:Title}

{Title}

{/block:Title}

{block:Label} {Label} {/block:Label}
{Line}

Permalink {block:NoteCount} · {NoteCount} {/block:NoteCount}· {Timeago}

{/block:Chat}

{block:Video}

{Video-500}

Permalink {block:NoteCount} · {NoteCount} {/block:NoteCount}· {Timeago}

{block:PermalinkPage}
{block:Caption}

{Caption}

{/block:Caption} {/block:PermalinkPage}

{/block:Video}

{block:Audio}

{AudioPlayerWhite}

{block:Artist}{Artist}{/block:Artist} {block:TrackName}{TrackName}{/block:TrackName}

Permalink {block:NoteCount} · {NoteCount} {/block:NoteCount}· {Timeago}

{block:PermalinkPage}{block:Caption}

{Caption}

{/block:Caption} {/block:PermalinkPage}

{/block:Audio}

{block:Answer}

{Asker} asked:

{Question}

{title} answered:{Answer}

Permalink {block:NoteCount} · {NoteCount} {/block:NoteCount}· {Timeago}

{/block:answer}

{block:PermalinkPage}

{block:PermalinkPagination} {block:PreviousPost} « Previous Post {/block:PreviousPost} | {block:NextPost} Next Post » {/block:NextPost} {/block:PermalinkPagination}

{block:NoteCount}{NoteCount} notes{/block:NoteCount} {block:HasTags} | {block:Tags}#{Tag} {/block:Tags} {/block:HasTags}

{block:ContentSource} {lang:Source}:{block:SourceLogo}

{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo} {/block:ContentSource} {block:RebloggedFrom} {ReblogParentName} {/block:RebloggedFrom}

{/block:PermalinkPage}

{/block:Posts}

{block:PostNotes}{PostNotes}{/block:PostNotes}

{block:NextPage} forth {/block:NextPage}

{block:PreviousPage}
back
{/block:PreviousPage}

and a live preview is available at govono.tumblr.com
Either masonry or infinite scrolling isn't working... and I am in desperate need of help. Please also remember I am a complete noob to codes and stuff, so really try to dumb it down for me.

Empty Slot in 198x198 Grid

Came up with this grid of 198 x 198 that I'm trying to use masonry on and I get a empty slot every so often. I was able to recreate the issue with jsFiddle:

http://jsfiddle.net/gC9hK/9/

Shouldn't the masonry fill that 198x198 space with one of the 198x198 bricks?

Thanks for the help.

-Pete

IE8 SCRIPT87: Invalid argument.

I'm getting a script error on the latest masonry (Masonry Vanilla) that breaks masonry, I'm getting Invalid argument on line 367 char 9

367: brick.style.top = ( minimumY + this.offset.y ) + 'px';

Char 9 is the first char on that line.¨

Any ideas of why?

Uncaught TypeError: Cannot call method 'appendChild' of undefined

A simple:
<script src="masonry.min.js"></script>

Or:
<script src="http://vanilla-masonry.desandro.com/masonry.min.js"></script>

Gives me
Uncaught TypeError: Cannot call method 'appendChild' of undefined
at
k = c.getElementsByTagName("body")[0],l = c.createElement("div"); l.style.marginTop = "1%",k.appendChild(l);

Under both Chrome and Firefox on Linux.
Whazzup?
I've got a body tag actually.

This is Vanilla Masonry v1.0.04

Changing font size

When the font size change causes the change of box sizes (em or ex-specified), then masonry won't re-arrange. That results in a bad layout (can be fixed by resizing the window).

Test-case: http://ktiml.ms.mff.cuni.cz/~cunat/vyuka/np/hs-syntaxe.html

Can you please add a LICENSE file

Can you please add a license file to your repo?

Non issue - Question about reordering?

Hello,

First, thank you for your work! It's fantastic.

I'm wondering if there is a way to let Masonry take over the order of the boxes in order to fit together without holes. Currently I have a layout that works well at most window sizes but then after a certain point it has one or two open spaces.... where a box could fit if allowed to move out of order. Any thoughts?

Thanks

IE 8 JS Error

Love the jQuery plugin and now the Vanilla plugin.

Found one little JS Error that occurs in IE 8:

IE 8 throws an error related to this line:
brick.style.top = ( minimumY + this.offset.y ) + 'px';

Exact error is:
Invalid argument.
Line:364, Char:5

Doesn't seem to affect functionality, but would love to have it fixed for cleanliness for IE8 users.

Thanks!

How is Vanilla Masonry licensed?

I'm interested in using this for a project, but our legal folks insist that we find out how it's licensed. Normally I would expect to find a LICENSE file, but there doesn't appear to be one. How is Vanilla Masonry licensed? Similar to jQuery (http://jquery.org/license)?

Thanks!

Corner Stamp?

Is it possible to use Corner Stamp, like jQuery Masonry?

If yes, can I have an example?

Simon

Layout needs to update colYs

layout(bricks) does some strange stuff if the colYs aren't updated. Adding something like:

var i = wall.cols;
wall.colYs = [];
while (i--) wall.colYs.push( 0 );

where wall is the instance before wall.layout(bricks); clears it all up.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

desandro / vanilla-masonry Goto Github PK

vanilla-masonry's Introduction

Vanilla Masonry

Viewing this project locally

Via download

Via Jekyll

vanilla-masonry's People

Contributors

Stargazers

Watchers

Forkers

vanilla-masonry's Issues

{Source}

Recommend Projects

Recommend Topics

Recommend Org