callmecavs / bricks.js Goto Github PK
View Code? Open in Web Editor NEWA blazing fast masonry layout generator for fixed width elements.
Home Page: http://callmecavs.com/bricks.js/
A blazing fast masonry layout generator for fixed width elements.
Home Page: http://callmecavs.com/bricks.js/
@callmecavs first wanted to say this is dope!
Hi guys,
can you provide work example of resize method?
I have catalog and filter that opens at the left of catalog.
so on page load I have 3 columns, if filter box opened it whould be changed to 2 columns. And sure this example should be with breackpoints :)
thanks
I could not bundle it through parcel.
Is this because of a parcel bundler or am I missing something?
Is there any kind of built in reinit function etc for when new images are loaded using a lazy load script?
Since the grid elements are positioned absolutely, the grid container height is not big enough.
This is great that media queries in the sizes
parameter can use any unit, but how is it useful if elements width must be in px
?
It would be really great if we could also use em
or rem
for elements widths. Thanks!
Register this as a bower package?
https://bower.io/docs/creating-packages/
:)
Does this framework work with video?
Hi,
I'm trying to get this working but I get an error:
TypeError: options.packed is undefined[Learn More]
I've tried it with a selector:
const instance = Bricks({
container: "#case-wrapper a"
});
and also a direct node for the parent:
const instance = Bricks({
container: document.getElementById("case-wrapper")
});
What am I doing wrong?
TIA
Andy
The resize function doesn't consistently work for me, so I replaced it with this code
window.addEventListener('resize', function() {
instance.pack();
}, true);
This throws "nodesWidth is not defined". inspecting the source, sure enough there is a line that expects a var called nodesWidth
which doesn't exist anywhere else. Adding var nodesWidth = 1;
to my script works
It's stuck at 100ms, and refreshing the pack throws
bundle.js:1 Uncaught ReferenceError: nodesWidth is not defined
I'm in dynamic list and remove / add elements. Starting or update when the list is empty raise an error here https://github.com/callmecavs/bricks.js/blob/master/src/bricks.js#L103
Would be nice to handle this in bricks. My go around is to destroy bricks.js when going empty and restart it... but it's not very nice.
Hi guys,
I think this library would be perfect together with PhotoSwipe, and I was hoping someone might be able to help integrate the two libraries.
Here's a working bricks.js implementation: https://jsfiddle.net/939ppbj4/21/
Here's a working photoswipe.js implementation: https://jsfiddle.net/939ppbj4/24/
Here's a non-working brick.js + photoswipe.js implementaiton: https://jsfiddle.net/939ppbj4/30/
Could someone please help figure out what's wrong? I think many people might appreciate a working example of bricks.js and photoswipe.js together.. :)
Using the provided, documented code, I get this error every time, SyntaxError: Unexpected identifier 'Bricks'. import call expects exactly one argument. and Bricks fails. I may be missing something basic but it makes no sense to set up a simple demo jsfiddle demo with the provided Bricks code and nothing works.
While trying bricks.js, I failed with a simple example. If the demo exposed the code it uses to generate the grid or if it was runnable (e.g. open it in a plnkr), trying bricks would be much easier.
I've set up an example here.
Sorry if I missed something in the documentation that could have fixed these issues. The example and documentation didn't go into a lot of details so it took me a while to get it working the way I have it in the codepen. If someone could provide some guidance, it would be greatly appreciated.
It'd be nice to allow percentage width gutters, as I set my grid items widths as a percentage as well (using a Sass mixin that takes columns, and gutter into account). Any plans to implement this?
In order to clean up things nicely and avoid memory leak due to binding on resize
event. This is mostly for dynamic webapp.
bricks-1.7.1.min.js:6 Uncaught ReferenceError: nodesWidth is not defined
Is there a way to have the bricks animate into their position when the viewport resizes? Can this be done via CC3 or must be a JS thing?
Do you have plans to support IE9 in future?
Can you please add documentation and/or an example on how to run multiple instances on a single page?
Hello, I was hoping it would be possible for you to make a codepen demo showcasing how properly integrate bricks.js so newbies like myself can also use it
If possible then I'd really appreciate if you could help integrate it to: http://codepen.io/dadada/pen/Wxrxjo?editors=0010 or some other image gallery
( if don't have codepen can use account: dadada // 123456 )
Is there any possibility to have the sizes array based on the container node? I am writing a plugin that should be dynamic enough for many webpages. So I would really appreciate such a feature.
Best wishes
Hello,
This is more of a question than an issue, but being relatively new to web development and JavaScript, I've never used such an environment to build my websites, only simple js scripts loaded externally or inside my pages.
Also I'm considering using Bricks for a small website for which I don't have access to the server apart from an FTP access, so I won't be able to run any command.
Is there a way to use it for such a use case?
Thank you very much, I hope someone can help me, Bricks seems perfect for what I want to do.
Shall we make the horizontal and vertical gutter separately? Instead of using the same gutter size in both direction
Ive tried the library because it looks interesting but it is actually not working.
Ive included it like described in the documentation but my elements are just positioned absolute
and the data-packed
attribute was added, nothing more.
Also the absolute positioning only occurs after resizing the browser window, despite calling .resize(true)
after instantiation.
HTML:
<ul class="listings">
<li class="listing"></li>
<!-- ... -->
</ul>
JS:
const bricks = new Bricks({
container: ".listings",
packed: "data-packed",
position: false,
sizes: [
{
columns: 1,
},
{
mq: "800px",
columns: 2
},
{
mq: "1200px",
columns: 3,
},
{
mq: "1600px",
columns: 4,
},
{
mq: "2000px",
columns: 5
},
{
mq: "2400px",
columns: 6,
},
{
mq: "2800px",
columns: 7
},
{
mq: "3200px",
columns: 8
},
{
mq: "3600px",
columns: 9
},
{
mq: "4000px",
columns: 10
}
]
});
In my use case, the sizes array is calculated dynamically based on the state of the parent layout (the layout holding the bricks.js instance.) It's possible for the parent layout to change dynamically, which would require recalculating the sizes array.
The most direct solution would be to supply a new sizes array to an existing bricks.js instance and then repack. Do you think this is worth a PR?
I also considered tearing down the existing bricks.js instance and rebuilding it, but I'm not sure if that's the best way to go because of the overhead, and because tearing it down cleanly doesn't seem straightforward. Would you say that this is the preferred approach? Thanks!
Is there an easy way for animated filtering / sorting when grid is already rendered?
Like isotope library...
Hi!
I would like to know about the possibility of mixed-width content, let's say one block has the double of the width used in the other blocks, is possible to get this kind of result using the current version of Bricks?
Kindly,
Rafael
I like the style of you website. Let me know if you want to get bricks.js.org
: dns.js.org
I minify my app and minifying an already minified file is not advised, webpack raise a warning for that.
WARNING in ./node_modules/brick.js/src/parser.js
22:15-25 Critical dependency: the request of a dependency is an expression
@ ./node_modules/brick.js/src/parser.js
@ ./node_modules/brick.js/src/module.js
@ ./node_modules/brick.js/index.js
@ ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/search.vue?vue&type=script&lang=js
@ ./src/pages/search.vue?vue&type=script&lang=js
@ ./src/pages/search.vue
@ ./src/router/routes.js
@ ./src/router/index.js
@ ./.quasar/entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./.quasar/entry.js
WARNING in ./node_modules/brick.js/src/parser.js
33:22-35 Critical dependency: the request of a dependency is an expression
@ ./node_modules/brick.js/src/parser.js
@ ./node_modules/brick.js/src/module.js
@ ./node_modules/brick.js/index.js
@ ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/search.vue?vue&type=script&lang=js
@ ./src/pages/search.vue?vue&type=script&lang=js
@ ./src/pages/search.vue
@ ./src/router/routes.js
@ ./src/router/index.js
@ ./.quasar/entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./.quasar/entry.js
WARNING in ./node_modules/express/lib/view.js
81:13-25 Critical dependency: the request of a dependency is an expression
@ ./node_modules/express/lib/view.js
@ ./node_modules/express/lib/application.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./node_modules/brick.js/src/router.js
@ ./node_modules/brick.js/index.js
@ ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/search.vue?vue&type=script&lang=js
@ ./src/pages/search.vue?vue&type=script&lang=js
@ ./src/pages/search.vue
@ ./src/router/routes.js
@ ./src/router/index.js
@ ./.quasar/entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./.quasar/entry.js
I am attempting to implement this in a Vue.js project, I import Brick and configure an instance in the Vue "created()" lifecycle event. My understanding is that the above is what is outputted as a result of Webpack bundling... but unsure where to begin on resolving this.
WARNING Compiled with 3 warnings 23:39:37
warning in ./node_modules/brick.js/src/parser.js
22:15-25 Critical dependency: the request of a dependency is an expression
warning in ./node_modules/brick.js/src/parser.js
33:22-35 Critical dependency: the request of a dependency is an expression
warning in ./node_modules/express/lib/view.js
81:13-25 Critical dependency: the request of a dependency is an expression
Version: webpack 4.9.1
Time: 12266ms
Built at: 14/06/2018 23:39:37
To recreate the issue:
Amazing stuff !
It would be great that bricks.js may be available on some CDN.
Hi, what is the current status of this project? Is it still actively maintained or are you looking for maintainers?
Hey,
your http://callmecavs.com/bricks.js/ looks like broken at the bottom section. Bricks section doesn’t resize and overlays some of the licensing information.
@callmecavs As mentioned here #42 I presume the update method could used for adapting brick.js to work with an infinite scrolling lib(?). Have you or anyone tried brick.js with an infinite scrolling lib and had success?
What is solution for multiple masonry grids in 1 page?
Minimal example: https://jsfiddle.net/1s5o685n/
If you remove the display:none;
inline style from the first grid item in the above example, it works fine.
I'd like to be able to filter my grid items by hiding some and then re-packing them. Is there a way to do this? Seems like items with display:none
should be ignored in the packing process.
Cheers
I have a container full of a
links which contain <img>
s . I first pack the container, but after I add new images and try to update, they always sit behind each other (as if they have no height or width, even though when I debug the brick.js lib, it definitely recognizes the imgs height). The update is on the image loaded event. Using pack
instead works, but I would much rather figure out why update
isn't working.
this is the issue im facing, unless i resize the window, nothing works, it just show the content, after resizing the window, everyhting works as expected
My co-worker did some testing, and input above ~100,000 will freeze the browser. This is somewhat expected, but the Pack Time option does invite users to try some rather large numbers, so I would maybe limit the number of characters that can be inputted for the demo page's test.
See this Codepen:
https://codepen.io/boycce/pen/rdyyVd
when setting sizes if mq is a number 640
the breakpoint won't response unless it's a string 640px
. it would help if either it worked with both or documentation clarifies it should be a string and not any.
I already have my container node when instantiate bricks.js, would be useful to directly give it instead of adding special attribute on it in order to create a unique selector.
When placing over 100 elements into the website demo, the execution timing of the packing function is inaccurate.
We placed 100,000 items in the demo and it stated around 1.8s when in reality we timed it around 3-4s.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.