kudago / waterfall Goto Github PK
View Code? Open in Web Editor NEWWaterfall layout. Extremely fast lightweight version of fluid columns masonry layout of isotope.
Home Page: http://kudago.github.io/waterfall/
Waterfall layout. Extremely fast lightweight version of fluid columns masonry layout of isotope.
Home Page: http://kudago.github.io/waterfall/
We're trying to get jquery ui draggable working with Waterfall, with no luck. The images jump to crazy locations during the drag, I assume because things are reflowing. Has anyone gotten any drag-and-drop solution working with waterfall?
If I init plugin in console for block without elements will be error:
Uncaught TypeError: Cannot read property 'dataset' of undefined
For 564 line:
if (!$.parseDataAttributes) {
$.parseDataAttributes = function(el) {
var data = {};
if (el.dataset) {
For example, I need to load elements, later through ajax.
I have a markup:
<div id="waterfall" class="container">
<div class="timeline-item"></div>
<div class="timeline-item"></div>
<div class="timeline-item"></div>
<div class="timeline-item"></div>
</div>
There are news, that I want to show in 2 columns. Between this colums only for styling purposes I want to add timeline.
<div id="waterfall" class="container">
<div class="timeline"></div>
<div class="timeline-item"></div>
<div class="timeline-item"></div>
<div class="timeline-item"></div>
<div class="timeline-item"></div>
</div>
But how I can do, to exclude .timeline
block from waterfall reflow
I've been trying to use waterfall on a tumble feed and the master build doesn't add the column classes. I ended up pulling the '.js' from the demo on the site which works.
var $container = $('#list');
$('#wrapper').css('visibility','hidden');
$container.imagesLoaded(function(){
$container.waterfall({
colClass: 'content-column',
});
$('#wrapper').css('visibility','visible');
});
You should definitely hook up a demo of jquery.waterfall! I know I'd be interested in seeing what it looks like in action.
I think HTMLCollection does not have push method because it is not an array.
I got this error when I tried to initiate the waterfall by using $(window).load()
The error is from line 469 of jquery.waterfall.js
if (el.dataset) {
Here is the code snippet.
if (!$.parseDataAttributes) {
$.parseDataAttributes = function(el){
var data = {};
if (el.dataset) {
$.extend(data, el.dataset);
}
can it attach/detach off-screen element when scrolling up/down in order to improve performance?
Hi,
I'd like to know if is possible using just 2 columns?
Hi can I do that?
Tks
I used to use a fixed height for each item, but still cannot fit my design, the height changes after waterfall took effect makes it looked bad. I am just wondering is there any possibility to observe height changes or image loaded for each item?
jqueryjquery.waterfall.js:545: WARNING - unreachable code
Error before initialization. Uncaught TypeError: Cannot read property 'transform' of null
No method error after initialization.
Ideas?
Hello. How can i change the flow of the items? I want them to start and the top left and flow right.
The issue i am having is that the items are not being displayed as i would hope.
Lets say the html markup is like this:
<div id="buildcontainer">
<div class='blogresults'>ITEM 1</div>
<div class='blogresults'>ITEM 2</div>
<div class='blogresults'>ITEM 3</div>
<div class='blogresults'>>ITEM 4</div>
</div>
When checking the source code, that is the mark up. Yet in my website grid the items are displayed such as:
ITEM 3 | ITEM 1 | ITEM 4 | ITEM 2
This wouldnt normally be a problem, except i am ordering the contents depending on their popularity. I could hack it and change the order of the content, but its all dynamically loaded.
Is this a case of my items css styling? Here is the styling for that:
.blogresults {
border: 0px solid #fff;
background-color: #fff;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
z-index: 500;
disply: inline-block;
float:;
-webkit-transition: box-shadow 200ms;
-moz-transition: box-shadow 200ms;
-o-transition: box-shadow 200ms;
-ms-transition: box-shadow 200ms;
transition: box-shadow 200ms;
}
#buildcontainer {
width: 100%;
height: auto;
margin-top: 5%;
}
Is it possible to set the amount of columns in mobile width? (any width?)
Cheers,
Elijahu
I would like to control the margins so that 30px between each item top and bottom.
wheres the best place to do this ?
Hi @dfcreative,
waterfall is an awesome lightweight plugin, thank you for the awesome job! I'm wondering if the maxCol option is supposed to work or not? I tried setting it via data attribute, as well through the JS init, but the script seems to ignore it.
$( '#newsgrid' ).waterfall({
colMinWidth: 300,
maxCols: 2,
autoresize: true
});
.append() works as expected. But there is some issue on .prepend(), waterfall did not prepend elements, it appends elements to the tail. I have to recall waterfall again to re-layerout, that makes waterfall acts weird.
I like this plugin, but it seems to have issues with IE v 8 on windows.
Dettagli errore pagina Web
Agente utente: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E)
Timestamp: Tue, 1 Oct 2013 13:28:19 UTC
Messaggio: 'JSON' non è definito
Linea: 4
Carattere: 559
Codice: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
Messaggio: 'defaultView.getComputedStyle' è nullo o non è un oggetto
Linea: 2
Carattere: 2348
Codice: 0
URI: http://dfcreative.github.io/projects/waterfall/js/zepto.js
Messaggio: Previsto oggetto
Linea: 6
Carattere: 2
Codice: 0
URI: http://dfcreative.github.io/projects/waterfall/jquery.waterfall.js
Messaggio: Previsto oggetto
Linea: 519
Carattere: 2
Codice: 0
URI: http://dfcreative.github.io/projects/waterfall/
Probably not specific to this plugin, is anyone getting a null
returned from calling document.defaultView.getComputedStyle
?
https://github.com/dfcreative/jquery.waterfall/blob/master/jquery.waterfall.js#L572
It happens when i am running a Jasmine test.
Hacky but not sure if its right to wrap it with a conditional..
if(style != null)
?
This package doesn't have any GitHub release. Could you please create one, so that people can use this project from CDN?
Hi!
I managed to get the plugin working OK on one of my projects, but when I try to use it inside the div of an accordion panels, It looks completely messed up vertically... horizontally each box is where It should be but vertically the plugin places one over the other, I'm thinking maybe It's because the panel is hidden when the page loads or the height is zero. I tried adding the defaultContainerWidth option but that didn't help. Anyone has any info I could use to solve this problem?
Thanks.
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.