一大早就去办签证，啦啦啦♪(^∇^*)我要去日本玩了。先嘚瑟下，没办法啦，这是我人生第一次出远门，紧张ing，还只是跟朋友自助游，不参加任何的旅游团。
不过也不知道签证能不能拿下来就是了，我的情况好麻烦啊，又是银行证明，又是公司营业执照证明，朋友是公务员，还是事业单位，轻轻松松打张便条说不方便透露“国家机密”，流程比我简洁得多得多，不行，到时候如果一起玩的时候，一定要狠狠的坑她一把。
还是嗨森+高兴(〃'▽'〃)
实现功能：
- 1.一个页面可以多个瀑布流（我的那个运用的项目是十个艹）
- 2.自定义瀑布大小
- 3.自控制瀑布之间的距离
- 4.自选择是否开启浏览器缩放 - 动态改变瀑布流
- 5.瀑布流中存在图片，加载高度准确
- 6.自写瀑布模板
- 7.ajax加载后实例化瀑布流，滚动可ajax加载后追加瀑布流内容......
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript原生瀑布流+图片懒加载组件</title>
<style>
/** * { margin:0;padding: 0;}会导致每个标签一开始就初始化，耗性能不适用 **/
body, div, ul, ol, li, p, img, a, span{ margin:0;padding:0;}
li { list-style: none;}
.block { display: block;}
.mtb10 { margin: 10px 0;}
.ellipsis4 { overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.water-content { padding: 19px 28px;background-color: #F9F9F9;font-size: 12px;line-height: 1.7;color: #666;}
.title { font-size: 14px;line-height: 1.5;color: #333;font-weight: 600;}
#waterfall { position: relative;}
</style>
</head>
<body>
<ul id="waterfall"></ul>
<div id="goon">继续查看</div>
</body>
<script>
/**
* 瀑布流组件
* @params obj 配置参数
* @author hmt
*/
function Waterfall(obj) {
this.width = obj.width || 200; //每块石头的大小
this.spacing = obj.spacing || 10; //每块石头的间距
this.distance = this.width + this.spacing; //每块石头的宽度总和
this.resize = obj.resize || false; //是否开启浏览器缩放
this.scroll = obj.scroll || false; //是否开启页面滚动加载
this.image_field = obj.image_field; //石头中存在图片,图片代表的字段key
this.template = obj.template || function() {}; //石头渲染模板
this.wrap = obj.wrap; //瀑布容器
this.wrapId = obj.wrap.id; //瀑布容器的id
this.bindEvent(); //绑定事件
}
Waterfall.prototype = {
constructor: Waterfall, //构造函数指向原函数
append: function(list) { //瀑布容器追加构建dom内容
var itemTagName = 'DIV';
if (this.wrap.tagName === 'UL') { //容器如果是ul节点,则生成的石头是子节点
itemTagName = 'LI';
}
var exist_image_length = 0; //存储需要加载的图片个数
var load_image_length = 0; //存储加载完成的图片个数
var $this = this;
for (var l = 0; l < list.length; l++) { //创建dom结构
var item = document.createElement(itemTagName);
item.className = this.wrapId + '_item';
item.style.position = 'absolute';
item.style.width = this.width + 'px';
item.innerHTML = this.template(list[l]); //渲染石头的自定义模板内容
if (list[l][this.image_field]) { //判断存在需要加载的图片
exist_image_length++;
var waterfallImage = new Image();
waterfallImage.src = list[l][this.image_field];
waterfallImage.onload = function() { //当所有图片加载成功后,才开始构建瀑布流
load_image_length++;
if (load_image_length === exist_image_length) {
$this.change();
}
}
}
this.wrap.appendChild(item);
}
if (exist_image_length === 0) { //如果从头到尾都没有图片需要加载,直接构建瀑布流
this.change();
}
},
bindEvent: function() {
if (this.resize) { //开启浏览器缩放,重新绘制瀑布流
window.addEventListener('resize', this.change.bind(this));
}
if (this.scroll) { //开启滚动条滚动,自动加载瀑布流
var $this = this;
window.addEventListener('scroll', function() {
var srcollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (srcollTop + document.documentElement.clientHeight >= document.body.scrollHeight - 20) {
console.log('不建议开启，通常是异步请求，友好体验加载过程，建议放在页面上监听，除非死数据');
};
});
}
},
findMinIndex: function(heights) { //寻找在当前所有瀑布中,高度最小的那条索引
var m = 0;
for (var z = 0; z < heights.length; z++) {
m = Math.min(heights[m], heights[z]) === heights[m] ? m : z; //取最矮的那个高度索引
}
return m;
},
change: function() { //构建瀑布流
var number = Math.floor(this.wrap.clientWidth / this.distance); //一行能容纳多少颗石头,并向下取整
if (number <= 0) {
return false;
}
var items = document.getElementsByClassName(this.wrapId + '_item');
var arrayHeights = [];
for (var i = 0; i < items.length; i++) {
var j = i % number;
if (arrayHeights.length === number) { //一行排满后，自动切换至下一行
var minIndex = this.findMinIndex(arrayHeights);
items[i].style.left = this.distance * minIndex + 'px';
items[i].style.top = arrayHeights[minIndex] + this.spacing + 'px';
arrayHeights[minIndex] += items[i].offsetHeight + this.spacing;
} else{
arrayHeights[j] = items[i].offsetHeight;
items[i].style.left = this.distance * j + 'px';
items[i].style.top = 0;
}
}
this.setParentHeight(number, arrayHeights); //重置这个瀑布容器的高度
},
setParentHeight: function(n, array) {
var a = 0;
if (array.length > 1) {
for (var b = 0; b < Math.min(n, array.length); b++) {
a = Math.max(array[a], array[b]) === array[a] ? a : b; //取最高的那个高度索引
}
}
this.wrap.style.height = array[a] + 'px';
}
}
</script>
<script>
var mockData = [{
banner: 'img/0.jpg', title: '新华社华南理工大学“华南虎”战队夺得2017机甲大师赛总冠军-2017机甲大师赛总冠军',
descript: '8月6日，华南理工大学“华南虎”战队获得总冠军。当日，第16届全国大学生机器人大赛RoboMaster2017机甲大师全国总决赛在深圳举行'
}, {
banner: 'img/0.jpg', title: '图片为默认图-图片为默认图图片为-默认图图片为默认图图图片为-默认图图片-图图片为默认图图片-图图片为默认图图片',
descript: '为持续提升学校教学督导委员会的业务能力，2018年9月13日上午，40多名教学督导员走进教育技术中心，融入到学校信息化教学的常用情境中化教学督导能力'
}, {
banner: 'img/0.jpg', title: '教学督导员走进教育技术中心，提升信息化教学督导能力',
descript: '为持续提升学校教学督导委员会的业务能力，2018年9月13日上午，40多名教学督导员走进教育技术中心，融入到学校信息化教学的常用情境中化教学督导能力'
}, {
banner: 'img/0.jpg', title: '“华南虎”战队夺得2017机甲大师',
descript: '8月6日，华南理工大学“华南虎”战队获得总冠军。当日，第16届全国大学生机器人大赛Rob'
}];
var waterfall = new Waterfall({ //实例化组件
wrap: document.getElementById('waterfall'), //瀑布容器
width: 250, //石头大小,默认200
spacing: 15, //石头间距,默认10
resize: false, //不开启浏览器缩放,默认不开启
//scroll: false, //不建议开启，页面自行滚动方法异步加载最佳咯,默认不开启
image_field: 'banner', //若石头中存在图片,则图片的字段key,默认不存在
template: function(data) { //石头渲染内容模板
var randomImgIndex = Math.floor(Math.random() * 97); //假数据
if (data.banner) {
data.banner = 'img/' + randomImgIndex + '.jpg';
}
var fixedContent = '<div class="water-content">' +
'<p class="title">'+ data.title +'</p>' +
'<div class="mtb10 ellipsis4">'+ data.descript +'</div>' +
'</div>';
return data.banner ? '<img class="block" src="' + data.banner +'" width="100%" />' + fixedContent : fixedContent;
}
});
waterfall.append(mockData); //实例化的组件追加
document.getElementById('goon').onclick = function() {
waterfall.append(mockData); //页面点击操作实例化后的组件追加
}
</script>
</html>希望签证能下来，能下来，能下来，能下来，能下来！！！！！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
