raphamorim / waterfall.js Goto Github PK

View Code? Open in Web Editor NEW

537.0 21.0 70.0 120 KB

Tired of use creepy hacks or heavy ways to get a Grid based on Pinterest?

Home Page: http://raphamorim.io/waterfall.js/

JavaScript 100.00%

pinterest grid css waterfall layout cascading

waterfall.js's People

Contributors

Stargazers

Watchers

waterfall.js's Issues

TypeError: null is not an object (evaluating 'container.children')

Hi, I want to use waterfall.js on my website, but I keep getting this error in the console, no matter what version I use. I also tried different methods of importing waterfall.js into my project.

My html looks like this:

<html <!--...--> >
    <head>
        <!--...-->
    </head>
    <body>
        <div class="my-grid">
            <div class="item">Solid Snake</div>
            <div class="item">Riou</div>
            <div class="item">Jack Russel</div>
            <div class="item">Red</div>
            <div class="item">Sonic</div>
            <div class="item">Megaman</div>
        </div>

        <script src="//cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js"></script>
        <script>
              window.addEventListener('DOMContentLoaded', (event) => {
              console.log("Dom loaded");

              var grid = document.querySelector('my-grid');
              waterfall(grid);  
            });
        </script>
    </body>
</html>

And the error I keep getting is:

[Error] TypeError: null is not an object (evaluating 'a.children')
	(anonieme functie) (waterfall.min.js:1:1210)
	(anonieme functie) (index.html:33)

This is the error with the non-min js file:

[Error] TypeError: null is not an object (evaluating 'container.children')
	waterfall (waterfall.js:112)
	(anonieme functie) (index.html:33)

TypeError: Cannot read property 'style' of undefined

It shows this issue in browser.

Get the number of elements in the grid

It is possible? Like masonry has the 'onLayoutComplete' callback. I need something like that to retrieve the number of items that was adjusted by waterfall.

Layout issues

Hey,

Just tested this awesome land lightweight script with my site and found some issues.
Here is a test case: https://jsfiddle.net/ucgvpjp0/2/

If using borders for gutters instead of paddings, Waterfall calculates layout incorrectly.
Items width is set to 33.33%, but resizing window makes grid items to jump on some points. Maybe something with subpixel rounding?
Then there are more then one element with same class and Waterfall is called using that class, layout is calculated only on the first one.

I've been installed the waterfall.js and require the lib to be compiled by browserify, but when I run the command the browserify returns an error, I think this is happening because of the name with the extension ".js", because of this, the browserify recognizes this module as a local file in project. And returns a not found error.

Columns are stacked to the left

Follow the print

Is it possible to make them feel more balanced with the right side of the screen?

Provide a link for waterfall to jump to imgStatus

To troubleshoot load of many images that break the waterfall: Recommend the use of imgStatus

ES6

Would be cool to refactor the code to ES6, and provide the module through:

// ES6 Modules
import waterfall from 'waterfall.js'

// CommonJS Modules
const waterfall = require('waterfall.js')

And a UMD version through unpkg.

Maybe also take that opportunity to refactor and implement the tests #3.

What do you think about that?

Lazy Loading

I'm wondering if there's a way to lazy load new items at the bottom. Thanks!

Class selectors in the constructor do not create multiple instances of waterfall

waterfall('.container');

creates waterfall instance only for the first of the .container classes. It could create instances for all of the selector's elements, so you don't have to do things like this:

$('.container').each(function(){
	waterfall($(this)[0]);
});

Implements Tests

Readme

Would be great update the readme following the standard readme specification.

How about support module style?

I want to use waterfall.js
but I must use waterfall global function.

How about support moulde like AMD or UMD or es6 styles?

If you are busy, I am willing to contribute this issue.

Table w/ differences between waterfall, mansory an others

(performance and file size)

What do you think @israelst ?

Add UMD support

Add and implement a code style.

not `bower install waterfall.js` but `bower install waterfal`

D:\foo>bower install waterfall.js
bower                        ENOTFOUND Package waterfall.js not found

D:\foo>bower install waterfalljs
bower                        ENOTFOUND Package waterfalljs not found

D:\foo>bower install waterfall
bower waterfall#*           not-cached https://github.com/raphamorim/waterfall.js.git#*
bower waterfall#*              resolve https://github.com/raphamorim/waterfall.js.git#*
bower waterfall#*             download https://github.com/raphamorim/waterfall.js/archive/v1.1.0.tar.gz

Maybe you need update the document at "http://raphamorim.io/waterfall.js/" -> "How to get this?"

Automatizate minification process

Maybe use Gulp or Grunt?

Contributing guidelines

Would be great to add the contributing guidelines. I was thinking in something like this:

Contributing to waterfall.js

First off, thanks for taking the time to contribute!

Now, take a moment to be sure your contributions make sense to everyone else.
These are just guidelines, not rules.
Use your best judgment, and feel free to propose changes to this document in a pull request.

Reporting Issues

Found a problem? Want a new feature? First of all see if your issue or idea has already been reported.
If don't, just open a new clear and descriptive issue.

Submitting pull requests

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.

Fork it!
Clone your fork: git clone https://github.com/<your-username>/waterfall.js
Navigate to the newly cloned directory: cd waterfall.js
Create a new branch for the new feature: git checkout -b my-new-feature
Install the tools necessary for development: yarn
Make your changes.
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request with full remarks documenting your changes.

Testing

Every time you write a test, remember to answer all the questions:

What are you testing?
What should it do?
What is the actual output?
What is the expected output?
How can the test be reproduced?

Code Style

Follows the JavaScript Standard Style.

Scripts

Description of the available npm scripts.

What do you think about it?

Finish Gh-pages

Missing:

Why
Getting
How to use
Support

<div class="waterfall">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

And my styles like this:

<style>
* {
  box-sizing: border-box;
}
.waterfall {
  margin-left: -15px;
  margin-right: -15px;
}
.item {
  width: 25%;
  padding-left: 15px;
  padding-right: 15px;
}
</style>

OK, let's see...hmmm...WOW!

See, strange things happened, right? The 4th column comes out in the wrong position.

BTW, this issue appears in Chrome and Firefox, and Safari is just fine.

Edit issue again. Now I find another problem:

This time i change my styles( and I thought this may not be the primary reason ):

<style>
* {
  box-sizing: border-box;
}
.waterfall {
}
.item {
  width: 25%;
}
</style>

When i close the dev tools in Chrome( means page cache is enabled ), when i click the refresh button, page just shows up like this, which is happened in a random probability.