前端开发 AJAX + 瀑布流组件
摘要：麦子学院 web前端开发视频 面试前端开发有哪些问题 学会前端开发需要多久 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> ……
麦子学院 web前端开发视频 面试前端开发有哪些问题 学会前端开发需要多久
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>JAXA + 瀑布流</title>
<style type=”text/css”>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
html {
font-size: 12px;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
q:before,
q:after {
content: ”;
}
object,
embed {
vertical-align: top;
}
hr,
legend {
display: none;
}
img,
abbr,
acronym,
fieldset {
border: 0;
}
ul li {
list-style-type: none;
}
a,
label {
cursor: pointer;
}
img {
vertical-align: bottom;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
.clearfix:after {
content: “.”;
visibility: hidden;
display: block;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
.clearfix {
*zoom: 1;
}
input,
textarea,
select {
outline: none;
border: 1px solid #bfbfbf;
}
th {
font-weight: 400;
}
button {
cursor: pointer;
border: none;
outline: none;
}
textarea {
border: 1px solid #ccc;
resize: none;
outline: none;
overflow: hidden;
padding: 5px;
}
select {
outline: none;
}
.text_overflow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html {
font-family: “Microsoft YaHei”, tahoma, arial, “Hiragino Sans GB”, “\5b8b\4f53”, sans-serif;
font-size: 14px;
color: #5c5d5e;
}
body {
height: 500px;
}
.water-fall {
margin: 0 auto;
padding: 0 20px;
overflow: hidden;
}
.water-fall ul {
float: left;
width: 250px;
margin: 0 10px;
overflow: hidden;
}
.water-fall li {
margin-bottom: 10px;
height: 100%;
padding: 10px;
opacity: 0;
text-align: center;
border: 2px solid #000;
transition: opacity 5s;
}
.water-fall img {
width: 180px;
height: 180px;
}
.water-fall p {
margin: 20px 10px 0;
color: #fff;
font-size: 18px;
border: 2px dotted #dedede;
}
.water-fall .last-tip {
float: left;
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid #000;
text-align: center;
font-size: 18px;
}
.prompt-explain {
margin-bottom: 50px;
border: 2px dotted blue;
line-height: 1.5;
font-size: 16px;
padding: 10px;
}
</style>
</head>
<body>
<div class=”prompt-explain”>
<dl>
<dt>ajax + 瀑布流组件说明:</dt>
<dd>
<p>作用：该组件用于以瀑布流的形式显示数据</p>
<p>依赖:依赖water-fall.css</p>
<div>
<p>var water = new WaterFall(waterFall //整个瀑布流的容器（必须）, data.img // 数据源（必须）, {</p>
<p>ulBoxNum : 4,//设置显示多少列（可选）</p>
<p>eachNew : 4,//设置每次加载多少数据（可选，自己设置的话，为了防止极端情况，必须大于等于4）</p>
<p>ulBoxMargin : 10,//设置每个ul直接的间距（可选）</p>
<p>minHeight : 240,//设置每个li的最小高度（可选）</p>
<p>maxHeight : 300,//设置每个li的最大高度（可选）</p>
<p>lastTip : ‘数据显示完毕！’//设置数据完全加载后的提示语（可选）</p>
});
</div>
<p>兼容：IE8+</p>
</dd>
</dl>
</div>
<div id=”waterFall” class=”water-fall clearfix”></div>
<script>
; (function (win, doc) {
‘use strict’;
function WaterFall(obj, data, options) {
this.obj = obj;
this.length = data.length;
this.indexNum = 0;
this.isLast = false;
this.goLast = true;
this.init(options, data);
}
WaterFall.prototype = {
constructor: WaterFall,
init: function (options, data) {
var defaultOptions = {
ulBoxNum: 4,
eachNew: 4,
ulBoxMargin: 10,
minHeight: 240,
maxHeight: 300,
lastTip: ‘数据显示完毕！’
}
options = options || {};
this.extend(defaultOptions, options);
this.createUlBox(options.ulBoxNum);
this.createCon(options, data);
this.EventBind(options, data);
this.obj.style.width = this.obj.querySelector(‘ul’).offsetWidth * options.ulBoxNum + 2 * options.ulBoxNum * options.ulBoxMargin + ‘px’;
if (options.ulBoxNum * options.eachNew > this.length) {
this.lastShow(options);
}
},
randomNum: function (x, y) {
return Math.floor(Math.random() * (Math.max(x, y) – Math.min(x, y))) + Math.min(x, y);
},
// 画ul
createUlBox: function (num) {
var frag = document.createDocumentFragment();
for (var i = 0; i < num; i++) {
var oList = document.createElement(“ul”);
frag.appendChild(oList);
}
this.obj.appendChild(frag);
},
// 画Li
createLi: function (options, data) {
var r = this.randomNum(0, 255),
g = this.randomNum(0, 255),
b = this.randomNum(0, 255),
oLi = doc.createElement(“li”),
img = doc.createElement(“img”),
p = doc.createElement(‘p’);
img.src = data[this.indexNum][‘imgSrc’];
p.innerText = data[this.indexNum][‘imgDer’];
this.indexNum++;
oLi.style.height = this.randomNum(options.minHeight, options.maxHeight) + “px”;
oLi.style.backgroundColor = ‘RGB(‘ + r + ‘, ‘ + g + ‘, ‘ + b + ‘)’;
oLi.style.opacity = 1;
oLi.appendChild(img);
oLi.appendChild(p);
return oLi;
},
// 随机增加节点
createCon: function (options, data) {
var oList = null;
for (var j = 0; j < options.eachNew; j++) {
for (var i = 0; i < options.ulBoxNum; i++) {
if (this.indexNum < this.length) {
oList = this.createLi(options, data);
this.obj.querySelectorAll(‘ul’)[i].appendChild(oList);
} else {
this.isLast = true;
}
}
}
},
// 事件绑定
EventBind: function (options, data) {
var oThis = this;
window.onscroll = function () {
if (!oThis.isLast) {
var scT = doc.documentElement.scrollTop || doc.body.scrollTop,
scH = doc.documentElement.scrollHeight || doc.body.scrollHeight,
cH = doc.documentElement.clientHeight || doc.body.clientHeight;
if (scT + 20 >= scH – cH) {
oThis.createCon(options, data);
}
} else if (oThis.goLast && oThis.isLast) {
oThis.lastShow(options);
}
}
},
// 对象扩展
extend: function (obj1, obj2) {
for (var x in obj1) {
if (!obj2[x]) {
obj2[x] = obj1[x];
}
}
return obj2;
},
// 加载完毕后的函数
lastShow: function (options) {
var oThis = this,
oList = doc.createElement(‘div’);
oThis.goLast = false;
oList.innerText = options.lastTip;
oList.className = ‘last-tip’;
oThis.obj.appendChild(oList);
}
}
win.WaterFall = WaterFall;
})(window, document);
</script>
<script>
var waterFall = document.querySelector(‘#waterFall’);
var data = {
img: [
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
imgDer: ‘这是一张图片1’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
imgDer: ‘这是一张图片2’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
imgDer: ‘这是一张图片3’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
imgDer: ‘这是一张图片4’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
imgDer: ‘这是一张图片5’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
imgDer: ‘这是一张图片1’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
imgDer: ‘这是一张图片2’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
imgDer: ‘这是一张图片3’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
imgDer: ‘这是一张图片4’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
imgDer: ‘这是一张图片5’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
imgDer: ‘这是一张图片1’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
imgDer: ‘这是一张图片2’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
imgDer: ‘这是一张图片3’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
imgDer: ‘这是一张图片4’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
imgDer: ‘这是一张图片5’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
imgDer: ‘这是一张图片1’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
imgDer: ‘这是一张图片2’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
imgDer: ‘这是一张图片3’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
imgDer: ‘这是一张图片4’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
imgDer: ‘这是一张图片5’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
imgDer: ‘这是一张图片1’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
imgDer: ‘这是一张图片2’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
imgDer: ‘这是一张图片3’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
imgDer: ‘这是一张图片4’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
imgDer: ‘这是一张图片5’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
imgDer: ‘这是一张图片1’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
imgDer: ‘这是一张图片2’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
imgDer: ‘这是一张图片3’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
imgDer: ‘这是一张图片4’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
imgDer: ‘这是一张图片5’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
imgDer: ‘这是一张图片1’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
imgDer: ‘这是一张图片2’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
imgDer: ‘这是一张图片3’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
imgDer: ‘这是一张图片4’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
imgDer: ‘这是一张图片5’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701sxklzxxdx7dxfxbb.jpg’,
imgDer: ‘这是一张图片1’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701pl2666lraikw102w.jpg’,
imgDer: ‘这是一张图片2’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701fmwwtvfy661dw64t.jpg’,
imgDer: ‘这是一张图片3’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701aejphz7deze7rler.jpg’,
imgDer: ‘这是一张图片4’
},
{
imgSrc: ‘http://cdn.attach.w3cfuns.com/notes/pics/201609/29/150701ukrkl77frs7ssikr.jpg’,
imgDer: ‘这是一张图片5’
},
]
};
var water = new WaterFall(waterFall, data.img, {
ulBoxNum: 4,//设置显示多少列（可选）
eachNew: 4,//设置每次加载多少数据（可选）
ulBoxMargin: 10,//设置每个ul直接的间距（可选）
minHeight: 240,//设置每个li的最小高度（可选）
maxHeight: 300,//设置每个li的最大高度（可选）
lastTip: ‘数据显示完毕！’//设置数据完全加载后的提示语（可选）
});
</script>
</body>
</html>
网络前端开发需要教材 怎么制作web前端开发 微信小程序可视化前端开发
» 本文来自：前端开发者 » 《前端开发 AJAX + 瀑布流组件》
» 本文链接地址：https://www.rokub.com/5425.html
» 您也可以订阅本站：https://www.rokub.com
近期评论