我不是天使：javascript原生手动分页组件我不是天使：javascript原生自定义轮播图组件
一大早就去办签证，啦啦啦♪(^∇^*)我要去日本玩了。先嘚瑟下，没办法啦，这是我人生第一次出远门，紧张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; //石头中存在图片,图片代表的字段keythis.template = obj.template || function() {}; //石头渲染模板this.wrap = obj.wrap; //瀑布容器this.wrapId = obj.wrap.id; //瀑布容器的idthis.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: '新华社华南理工大学“华南虎”战队夺得机甲大师赛总冠军-机甲大师赛总冠军',descript: '8月6日，华南理工大学“华南虎”战队获得总冠军。当日，第16届全国大学生机器人大赛RoboMaster机甲大师全国总决赛在深圳举行'}, {banner: 'img/0.jpg', title: '图片为默认图-图片为默认图图片为-默认图图片为默认图图图片为-默认图图片-图图片为默认图图片-图图片为默认图图片',descript: '为持续提升学校教学督导委员会的业务能力，9月13日上午，40多名教学督导员走进教育技术中心，融入到学校信息化教学的常用情境中化教学督导能力'}, {banner: 'img/0.jpg', title: '教学督导员走进教育技术中心，提升信息化教学督导能力',descript: '为持续提升学校教学督导委员会的业务能力，9月13日上午，40多名教学督导员走进教育技术中心，融入到学校信息化教学的常用情境中化教学督导能力'}, {banner: 'img/0.jpg', title: '“华南虎”战队夺得机甲大师',descript: '8月6日，华南理工大学“华南虎”战队获得总冠军。当日，第16届全国大学生机器人大赛Rob'}];var waterfall = new Waterfall({//实例化组件wrap: document.getElementById('waterfall'), //瀑布容器width: 250, //石头大小,默认200spacing: 15, //石头间距,默认10resize: 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>
希望签证能下来，能下来，能下来，能下来，能下来！！！！！
