明霞山资源网 Design By www.htccd.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.htccd.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。