bingdian / waterfall Goto Github PK
View Code? Open in Web Editor NEWjQuery waterfall plugin,like Pinterest.
Home Page: https://wlog.cn/waterfall/
License: MIT License
jQuery waterfall plugin,like Pinterest.
Home Page: https://wlog.cn/waterfall/
License: MIT License
On a page with around 1000 images, the infinite scroll crashes the browser.
Perhaps there should be an option to remove the higher images after a certain point.
Hi,
I try to make 2 waterfall container on one page by using two different id.
e.g.
<div id="container1"></div>
<div id="container2"></div>
but after loaded the page, one of the container seems not showing the grid properly.
Does the library support two waterfall div on one page?
or i missed something?
Also, how can i use two different template of handlebars?
Seems the library only look for the id "waterfall-tpl" ?
There seems to be no difference between the infinite scroll and finite scroll page in the demo. Clicking on the navigation links seems to just reload the same page rather than page 2, 3, 4 etc. Am I missing how this is supposed to work?
is possible that images fit depending on the size of the screen?
页面上为啥始终有个H-Scrollbar呢?
Hi,
I would like to add to the json file a link for each item.
Is there any easy way to do that?
The reLayout method is not active or working on your demo page
Is there an option to use a button or link to add new items with a manual trigger rather than only with scrolling? Similar to the Twitter behavior in Paul Irish's infinite scroll, https://github.com/paulirish/infinite-scroll
waterfall.js is not work when I put script near jQuery Mobile script,
but I drop jQuery Mobile script then waterfall.js is working normal.
底部这个空白滚动条毫无意义,在
https://github.com/bingdian/waterfall/blob/master/build/waterfall.js#L186
$('body').css({
overflow: 'scroll'
});
改成
$('body').css({
overflow: 'auto'
});
就好了,
如何?
我想請問關於區塊問題
我目前把此套件套用於手機上是可以正常運行的
但我遇到一個小小的問題
就是設計把div區塊設計好後(圖片把畫面填滿),但是如果設定itemCls對應名稱,發現ajax會經過此套件而做縮放而無法填滿,想請教大大指點方向
renderData 的作用时间应该是在从path中得到地址,请求得到数据之后,在render之前吧?
现在重写callbacks的renderData发现无效,最终render出来的data还是从path中请求得到的,没有变化。
I am including a lightbox function in an image gallery using waterfall and I was wondering what the best callback to use might be? Right now it works using the following code, although the lighboxes numbering system for the images is wacky!
callbacks: {
loadingStart: function($loading) {
$loading.show();
$.jackBox.available(function() {
$("a.jackbox[data-group]").each(function() {
$(this).jackBox("newItem");
});
});
}
Would another callback be more efficient to use for something like this?
Also, I noticed on your demo of methods, the reLayout method is not active or working.
Hi,
Need to add fadein effect only for newly appended items, but if i set isFadeIn to true, all items in the page got fadein effect.
$('#append').bind('click', function() {
alert('appended');
});
});
Thanks.
demos/jsonp.html is not working because api.flicker.com now requires https access.
When 'path' parameter is not defined, the resizing of browser window doesn't work. For example if the number of <div id="item"></div>
blocks are static and no loading of extra content is required.
It's an edge case, and can be fixed by specifying an empty function or an empty Array [] for 'path'.
Hello!
How to use the plugin without json?
I have a list that returns data with php.
Is to use the plugin without data .json?
Thanks!
can it attach/detach off-screen element when scrolling up/down in order to improve performance?
打开页面之后。自动无限请求后台,为啥会这样
HI, First of all nice plugin. I am using this in my application that include filters as well.
like I need to change the images by filtering them.
Problem: I am unable to destroy waterfall object and remake a new one.
Please help.
Regards
Muddassir
Is there any function to reload the waterfall?
翻页时当新数据要重新刷新是要怎么做?是否有个reload的方法能调用?
方便留下qq等通信方式吗?
The js template is:
{{#result}}
<div class="item">
<img class="thumbs" src="{{image}}" width="{{width}}" height="{{height}}" />
</div>
{{/result}}
And I'm try to add a click event to the img element, part of my code is as following:
$(".thumbs").click(function(){
alert('click');
});
But, unfortunately, it doesn't work. I'm not good at js and can someone help me? 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.