http://docs.kissyui.com/docs/html/demo/component/waterfall/effect.html#waterfall-demo-effect
KISSY.use("waterfall,ajax,gallery/template/1.0/,node", function (S, Waterfall, io, Template, Node) { var $ = Node.all; var tpl = Template($('#tpl').html()), nextpage = 1, waterfall = new Waterfall.Loader({ container:"#ColumnContainer", // 窗口大小变化时的调整特效 adjustEffect:{ duration:0.5, easing:"easeInStrong" }, load:function (success, end) { $('#loadingPins').show(); S.IO({ data:{ 'method':'flickr.photos.search', 'api_key':'5d93c2e473e39e9307e86d4a01381266', 'tags':'rose', 'page':nextpage, 'per_page':20, 'format':'json' }, url:'http://api.flickr.com/services/rest/', dataType:"jsonp", jsonp:"jsoncallback", success:function (d) { // 如果数据错误, 则立即结束 if (d['stat'] !== 'ok') { alert('load data error!'); end(); return; } // 如果到最后一页了, 也结束加载 nextpage = d['photos'].page + 1; if (nextpage > d['photos'].pages) { end(); return; } // 拼装每页数据 var items = []; S.each(d['photos']['photo'], function (item) { item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height items.push(new S.Node(tpl.render(item))); }); success(items); }, complete:function () { $('#loadingPins').hide(); } }); }, minColCount:2, colWidth:228 }); // scrollTo $('#BackToTop').on('click', function (e) { e.halt(); e.preventDefault(); $(window).stop(); $(window).animate({ scrollTop:0 }, 1, "easeOut"); }); $("#ColumnContainer").delegate("click", ".del", function (event) { var w = $(event.currentTarget).parent(".ks-waterfall"); waterfall.removeItem(w, { effect:{ easing:"easeInStrong", duration:0.1 }, callback:function () { alert("删除完毕"); } }); }); $("#ColumnContainer").delegate("click", ".grow", function (event) { var w = $(event.currentTarget).parent(".ks-waterfall"); waterfall.adjustItem(w, { effect:{ easing:"easeInStrong", duration:0.1 }, process:function () { w.append("<p>i grow height by 100</p>"); }, callback:function () { alert("调整完毕"); } }); }); });
相关推荐
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件,包含瀑布流布局和无限滚动加载 与其他实现相比,无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项,图像才被预加载,然后进行布局 响应式...
waterfall瀑布流.rar
waterfall瀑布流.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
Android高级应用源码-waterfall瀑布流.zip
Vue.js 下的瀑布流组件。ES5、ES6、UMD 兼容。享受数据驱动带来的便利,让事情变得简单。 标签:vuewaterfall
React本机瀑布 用于React-Native的虚拟化和无限瀑布布局组件 入门 npm i react-native-virtualized-waterfall 或者 yarn add react-native-virtualized-waterfall 预习 相关项目: 道具 请参考类型定义 *此项目...
waterfall瀑布流.zip项目安卓应用源码下载waterfall瀑布流.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
kuan-vue-waterfall (vue3.0 瀑布插件)不需要设置内容高度,间隙默认 0注意:如果没有图片需要延迟获取元素尺寸的话,可以设置delay=false,等待图片加载后显示元素体验比较差安装yarn add kuan-vue-waterfall# ...
有在网上找的一个,然后自己在研究的一份! 值得学习.
前几年的Android应用源码Demo,主要面向的是学生毕业设计学习。
waterfall瀑布流
网上找的瀑布流安卓实现源码demo,希望这个可以对你有用
想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易。 但是,随着时代的发展,随着时代的进步….. 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上已经有一定的基础了,咱们废话...
这是一款超轻量级的瀑布流组件,无需预设高度,支持PC和移动端。支持图片加载后重新调整顺序。
waterFall - 瀑布流插件
安卓Android源码——waterfall瀑布流.zip
瀑布流waterfall php,感觉不错,需要的下。
安卓开发-waterfall瀑布流.zip.zip
jquery 实现图片瀑布流加载,附件中含有全部源代码,waterfall.js为对应的js代码。images中存放图片信息,demo中图片加载为静态加载,后续可以改成ajax服务请求更新。
源码参考,欢迎下载