Lightweight and independent Pinterest-like cascading grid layout library

I just tried your work. It works like magic, but only for one gallery on a page. I tried to use more generated galleries, where in every gallery i use bricklayer class. But it takes only first appearance and not the others. Can I ask you for help. Javascript amateur here, sorry.

Do not really know if this is an issue of it or not.

This is rather a bug but more a call for help. I'm trying to get bricklayer work within my angular2/ionic2 app. This is what I have so far:

HTML

<button (click)="addBrick()">Add a brick</button>
<section #bricklayer class="bricklayer"></section>

JS

export class MyPage {
  bricklayer: Bricklayer;
  @ViewChild('bricklayer') bricklayer:ElementRef;

  constructor() { }

  ngAfterViewInit() {
    console.log(this.bricklayer.nativeElement);
    this.bricklayer = new Bricklayer(this.bricklayer.nativeElement);
    console.log(this.bricklayer);
  }

  newBox() {
    var randomColor = '#' + Math.random().toString(16).substr(-6);
    var heights = [50, 90, 150, 190, 230];
    var randomHeight = heights[Math.floor(Math.random() * heights.length)];
    var box = document.createElement('div');
    box.className = 'box';
    box.style.backgroundColor = randomColor;
    box.style.height = randomHeight + "px";
    return box;
  }

  addBrick() {
    var box = this.newBox();
    box.innerHTML = (this.bricklayer.elements.length + 1);
    this.bricklayer.append(box);
  }
}

CSS

.bricklayer {
  margin: 10px 5px;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 10px;
}

The 2 console.logs (one for the HTML element and another one for the bricklayer reference) log out correct (as far as I can tell) but as soon as try to append a brick I get an error:

TypeError: Cannot read property 'appendChild' of undefined

Hello! Love your library!

I've come across an issue when using bricklayer in a SPA (using Aurelia as the MVC framework). Using two simple routes/views: one is a 'menu' route/view with 2 instances of bricklayer for 2 different "module" menus on the same page. Bricklayer is initialized with the following after attaching the template/DOM to the window.

var bricklayer = new Bricklayer(document.querySelector('#bricklayer-m' + mid));

where mid is the module id, thus initializing bricklayer on both #bricklayer-m0 and #bricklayer-m1. Works perfect. Using a custom on('breakpoint') listener, columnCount shows the correct number when a breakpoint is reached.

I then leave this menu route/view, going to a different route/view in the SPA, and then come back to the menu route/view again. The menu is built again and bricklayer is initialized again for each instance. Again, bricklayer appears to be working fine, like above.

However, I'm now get this additional error whenever I resize the browser (Chrome). This error will fire twice on every browser resize, not just at the predefined breakpoints.

Uncaught TypeError: Cannot read property 'appendChild' of undefined (anonymous function) @ bricklayer-node.js:147 Container.reorderElements @ bricklayer-node.js:145 (anonymous function) @ bricklayer-node.js:100 triggerEvent @ bricklayer-node.js:20 Container.checkColumnCount @ bricklayer-node.js:123 (anonymous function) @ bricklayer-node.js:98

The custom on('breakpoint') listener displays columnCount as NaN. It's almost as if it's still looking for the two initial bricklayer instances, but is unable to find them (as they've been removed and reinitialized again upon changing routes).

Any thoughts on this? I've also tried to delete each instance of bricklayer with bricklayer = null as well before navigating away from the menu view/route, but no luck there either. If more info is needed, let me know...thanks!

Hi!

I tried to use bricklayer in my ES6/babelified code and the import seems to fail:

import Bricklayer from 'bricklayer'

The Bricklayer results in an empty object.

Hello, i really dont know is this issue... i'm trying to integrate bricklayer with default WP gallery, i include all the stuff, and in developer tools i can see appended stuff, but columns are 100% width

DEMO: http://hafizovic.ba/wp/246-2/

This is link to file where i initialized script http://hafizovic.ba/wp/wp-content/themes/hafizovic/js/custom.js?ver=05012016

Hi ademilter. Thanks your code.

I used your bricklayer at react code. But occur some issue.

If react component draw in list item with Ajax call more then One, occur some issue(do not run React-Router Link, Redux).

I added some function for react component list.

Use next example at Ajax success function callback.

this.bricklayer.unmount();
self.setState({items:self.state.items.concat(items));
this.bricklayer.mount();

See my code example

import React from 'react';
import { connect } from 'react-redux';
import { render, findDOMNode } from 'react-dom';
import { browserHistory, Router, Route, Link, withRouter } from 'react-router';

import Messages from './Messages';
import PostSummary from './PostSummary';

export function postSummary(props, post) {
    return <PostSummary {...props} post={post}/>;
}

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            posts : []
        };
    }

    loadSummary() {
        let self = this;
        let count = 10;
        let userId = 'all';
        if(this.props.params.id != undefined) {
            userId = this.props.params.id;
        }
        let url = `/post/list/${userId}/${this.lastPostId}/${count}`;
        this.listProgress = true;
        this.serverRequest = $.ajax({
            url: url,
            method: 'GET',
            dataType: 'json',
            cache: false,
            success: function(posts) {
                posts.forEach(function(post) {
                    self.lastPostId = post.id;
                });
                let scroll = {x:window.scrollX, y:window.scrollY};
                this.bricklayer.unmount();
                self.setState({posts:self.state.posts.concat(posts.concat())});
                this.bricklayer.mount();
                window.scrollTo(scroll.x, scroll.y);
                if(count > posts.length) {
                    clearInterval(self._timer);
                }
                self.listProgress = false;
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(url, status, err.toString());
                self.listProgress = false;
            }
        });
    }

    componentDidMount() {
        this.bricklayer = new Bricklayer(document.querySelector('.bricklayer'));

        this.lastPostId = "recent";
        this.listProgress = false;
        this.loadSummary();

        let self = this;
        this._timer = setInterval(function() {
            if(self.listProgress) {
                return;
            }
            let brick = $(".bricklayer");
            let brickBottom = brick.offset().top + brick.height();
            let brickBottomOffset = brickBottom - $(window).height() - $(window).scrollTop();
            let offset = 400;
            if(brickBottomOffset < offset) {
                self.loadSummary();
            }
        }, 500);
    }

    componentWillUnmount() {
        this.bricklayer.destroy();
        this.serverRequest.abort();
        this.listProgress = false;

        clearInterval(this._timer);
    }

    render() {
        const summary = this.state.posts.map(function(post) {
            return (<PostSummary key={post.id} post={post}/>);
        });
        return (
            <div className="container">
                <Messages messages={this.props.messages}/>
                <div className="bricklayer">
                    {summary}
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        messages: state.messages
    };
};

export default connect(mapStateToProps)(Home);

I just discovered bricklayer and i am happy who it works.

I was just wondering is it possible to make certain boxes wider? e.g. standard box and also column is for example 25% but i want certain boxes be like 50% while the rest goes around it. So not that the whole column is 50% width.

Thanks in advance

Trying to use Bricklayer.js in multiple IDs in same page. Or even it will be helpful to know, how to bricklayer all .bricklayer classes.

Any proper way to use bricklayer.destroy(); ? Is there any good example?

I tried: bricklayer.destroy(); var bricklayer = new Bricklayer(document.getElementById('bricklayer'));

The code throws error Uncaught TypeError: Cannot read property 'destroy' of undefined

In wall example, if there are lots of columns appear, it fails with finding min height column when all columns are empty. It finds it when at least one element exists.

Since jQuery is not much used, we can remove jQuery and make the plugin vanilla.

Used jQuery helpers:

• #width(), #height()
• #isArray()
• #append()
• #prepend()
• #on("resize", fn)
• #not(..)
• #find(..)
• #trigger()

Added a type check for the window.CustomEvent property to check it is actually a function. IE returns window.CustomEvent as an object, so a new instance cannot be created.

Hi folks, any suggestions on how to set the distance between columns? I'm playing with Padding and Margin customizing the CSS but the results are horrifying.

Please add this to the list!

Website: metis.eecs.wsu.edu Title: Pathways College Finder

This is a senior design project that will be used by the company SCALE. The server provided will go down in June, but sometime later the app will be redeployed elsewhere. When more colleges are added to our database, the true benefits of bricklayer can be seen. After hours of playing with bootstrap card columns and decks, bricklayer was the easy choice and huge time saver.

Hello — bricklayer working OK in this preview site :: https://gresfordarchitects.co.uk/projects

But Chrome is giving a strange 'flash' of a large content item each time the page is accessed... (try clicking the 'project' button several times... this issue seems specific to Chrome...

Any clues as to what this might be?!

thanks

for certain scenarios, besides append and prepend, one may want to remove an element and all the other elements to redraw to fill in the gaps...

enhanced the demo as well with remove on click

Please add this to the list!

Website: http://www.bether.me Title: Angular 2+ with gridLayer

Thank you very much for your esfort in that library First I was testing bootstrap cards-columns but it was incredible that they have horizontal order. Your library save tons of hours in work