rw
responsive_waterfall
npm i responsive_waterfall
rw

responsive_waterfall

Responsive waterfall grid implement in pure javascript without any dependencies

by leozdgao

1.0.1 (see all)License:MITTypeScript:Not Found
npm i responsive_waterfall
Readme

Responsive Waterfall

Responsive waterfall grid implement in pure javascript without any dependencies. Compatibility: IE9+

Demo here

Installation

Reference the script to your html like this, and without any other javascript library:

<script src="../responsive_waterfall.js"></script>

To make sure code works, you need to copy the style definition in wf-style.css or remember to let wf-column float, and "clearfix" for the container.

How to use

What you need to do is invoke the constructor and tell it how to select the container and the box in it. Then tell it how to split the column by setting the minBoxWidth. And here is the default value.

// use querySelector/querySelectorAll internally
var waterfall = new Waterfall({
    containerSelector: '.wf-container',
    boxSelector: '.wf-box',
    minBoxWidth: 250
});

Internally, I use getter/setter by ES5 Object API, the minBoxWidth will never bigger than 1000 and always bigger than 100;

If you want to customize the style of each column, you can define your own style for .wf-column in your css file.

Commomly, you will need to lazy load data and insert them to your view, so you can use waterfall.addbox to add the boxes, and re-compose after your adding.

var btn = document.getElementById('add-btn');
var boxHandle = newNode(); // simulation for getting box
btn.addEventListener('click', function() {

    waterfall.addBox(boxHandle());
});

License

MIT

Downloads/wk

1

GitHub Stars

105

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.0.1
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate