铁雪资源网 Design By www.gsvan.com
布局不是基于float,也不是基于绝对定位,看最下面的html,css就知道了。也没有满篇烦人的html插入,代码很清爽
function getIndex(index) { if (index < 10) { index = "00" + index; } else if (index < 100) { index = "0" + index; } return index; } var $ = function(id) { return document.getElementById(id); }; require([ "avalon-min" ], function(avalon) { var waterfall = { load_items : null, loaded_items:[], col_num : 0,// 列数 waterfall_model : null, col_width : 200, loaded_num : 0, init_num : 0, loading : false, start:0, resizing:false, find_shortest_col : function() { // 找出最小高度的列 var a = avalon($('row0')).height(), min_i = 0; for ( var i = 1; i < this.col_num; i++) { var b = avalon($('row' + i)).height(); if (b < a) { min_i = i; a = b; } } return min_i; }, init : function(data) { this.load_items = data; this.loaded_items=this.loaded_items.concat(data); this.waterfall_model = waterfall_model; this.col_num = Math.floor(avalon(window).width() / this.col_width); this.init_num = this.col_num; for ( var j = 0; j < this.col_num; j++) { waterfall_model.img_list.push([]); } for ( var j = 0; j < this.col_num; j++) { // 第一行图片 var a={}; a.src=getIndex(data[j].src); a.height=data[j].height; a.text=data[j].text; waterfall_model.img_list[j].push(a); } this.start=this.col_num; }, add_item : function(i) { var a = this.find_shortest_col(); var b={}; var c=this.load_items[this.init_num+i]; if(c){ b.src=getIndex(c.src); b.height=c.height; b.text=c.text; waterfall_model.img_list[a].push(b); } }, resize_item:function(i){ //console.log(i); var a = this.find_shortest_col(); var b={}; var c=this.loaded_items[this.init_num+i]; if(c){ b.src=getIndex(c.src); b.height=c.height; b.text=c.text; waterfall_model.img_list[a].push(b); } } }; var waterfall_model = avalon.define("waterfall",function(vm) {// vm vm.img_list = []; vm.rendered = function() {// 每次图片加载渲染后执行 if(waterfall.resizing){ if (waterfall.loaded_num+ waterfall.init_num<waterfall.loaded_items.length){ waterfall.loaded_num++; waterfall.resize_item(waterfall.loaded_num); //waterfall.start++; } }else{ if (waterfall.loaded_num + waterfall.init_num <waterfall.load_items.length){ waterfall.loaded_num++; waterfall.add_item(waterfall.loaded_num); waterfall.start++; } } }; }); avalon.config({ debug:false }); avalon.scan(); function debouncer( func , timeout ) { var timeoutID , timeout = timeout || 200; return function () { var scope = this , args = arguments; clearTimeout( timeoutID ); timeoutID = setTimeout( function () { func.apply( scope , Array.prototype.slice.call( args ) ); } , timeout ); } } avalon.post("http://localhost/css/test.php", function(data) { // 加载第一次 waterfall.init(data); }, "json"); window.onscroll =debouncer( function ( e ) { var scrollTop = avalon(window).scrollTop(), windowHeight = avalon( window).height(), documentHeight = avalon(document).height(); if (windowHeight + scrollTop==documentHeight) { avalon.post("http://localhost/css/test.php"+(waterfall.start), function(data) { // 加载第一次 waterfall.resizing=false; waterfall.load_items=data; waterfall.loaded_items=waterfall.loaded_items.concat(data); waterfall.loaded_num =waterfall.init_num=0; waterfall.add_item(0); }, "json"); } }); window.onresize = debouncer( function ( e ) { var windowWidth = avalon(window).width(), k = Math .floor(windowWidth / 200), detect_left = avalon( $('waterFallDetect')).offset().left; if (Math.abs(detect_left) >= 199) { waterfall.col_num = Math.floor(avalon(window).width() / waterfall.col_width); waterfall_model.img_list = []; for ( var j = 0; j < waterfall.col_num; j++) { waterfall_model.img_list.push([]); } waterfall.resizing=true; waterfall.loaded_num =waterfall.init_num=0; //waterfall.start=0; waterfall.resize_item(0); } },30) ; });
html
<div id='wrap' ms-controller="waterfall"> <ul ms-each-els="img_list" id='wrap_row'> <li ms-each-el="els" ms-attr-id='row{{$index}}' data-each-rendered='rendered'> <p> <img ms-src="/UploadFiles/2021-04-02/P_{{el.src}}.jpg">css
#wrap ul li { display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 16px; } #wrap ul li p { margin: 5px 2.5px; border: 1px solid red; min-width: 192px; min-height: 100px; } #wrap span { display: block; } #waterFallDetect { width: 192px; height: 100px; border: 1px solid red; }以上所述就是本文的全部内容了,希望大家能够喜欢。
标签:
响应式,瀑布流
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无avalonjs制作响应式瀑布流特效的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?