哪位懂js的大佬帮忙简单讲解一下瀑布流文章布局??
这是我从一个网站上扒下来的代码,已经实现无限加载瀑布流,贴出来大家帮忙解答一下,跪谢!!!
/*!
* http://bbs.design 信息瀑布流内容自动加载js代码
*/
var IASCallbacks = function() {
return this.list = [],
this.fireStack = [],
this.isFiring = !1,
this.isDisabled = !1,
this.fire = function(a) {
var b = a[0],
c = a[1],
d = a[2];
this.isFiring = !0;
for (var e = 0,
f = this.list.length; f > e; e++) if (void 0 != this.list[e] && !1 === this.list[e].fn.apply(b, d)) {
c.reject();
break
}
this.isFiring = !1,
c.resolve(),
this.fireStack.length && this.fire(this.fireStack.shift())
},
this.inList = function(a, b) {
b = b || 0;
for (var c = b,
d = this.list.length; d > c; c++) if (this.list[c].fn === a || a.guid && this.list[c].fn.guid && a.guid === this.list[c].fn.guid) return c;
return - 1
},
this
};
IASCallbacks.prototype = {
add: function(a, b) {
var c = {
fn: a,
priority: b
};
b = b || 0;
for (var d = 0,
e = this.list.length; e > d; d++) if (b > this.list[d].priority) return this.list.splice(d, 0, c),
this;
return this.list.push(c),
this
},
remove: function(a) {
for (var b = 0; (b = this.inList(a, b)) > -1;) this.list.splice(b, 1);
return this
},
has: function(a) {
return this.inList(a) > -1
},
fireWith: function(a, b) {
var c = jQuery.Deferred();
return this.isDisabled ? c.reject() : (b = b || [], b = [a, c, b.slice ? b.slice() : b], this.isFiring ? this.fireStack.push(b) : this.fire(b), c)
},
disable: function() {
this.isDisabled = !0
},
enable: function() {
this.isDisabled = !1
}
},
function(a) {
"use strict";
var b = -1,
c = function(c, d) {
return this.itemsContainerSelector = d.container,
this.itemSelector = d.item,
this.nextSelector = d.next,
this.paginationSelector = d.pagination,
this.$scrollContainer = c,
this.$container = window === c.get(0) ? a(document) : c,
this.defaultDelay = d.delay,
this.negativeMargin = d.negativeMargin,
this.nextUrl = null,
this.isBound = !1,
this.isPaused = !1,
this.isInitialized = !1,
this.listeners = {
next: new IASCallbacks,
load: new IASCallbacks,
loaded: new IASCallbacks,
render: new IASCallbacks,
rendered: new IASCallbacks,
scroll: new IASCallbacks,
noneLeft: new IASCallbacks,
ready: new IASCallbacks
},
this.extensions = [],
this.scrollHandler = function() {
if (this.isBound && !this.isPaused) {
var a = this.getCurrentScrollOffset(this.$scrollContainer),
c = this.getScrollThreshold();
b != c && (this.fire("scroll", [a, c]), a >= c && this.next())
}
},
this.getItemsContainer = function() {
return a(this.itemsContainerSelector)
},
this.getLastItem = function() {
return a(this.itemSelector, this.getItemsContainer().get(0)).last()
},
this.getFirstItem = function() {
return a(this.itemSelector, this.getItemsContainer().get(0)).first()
},
this.getScrollThreshold = function(a) {
var c;
return a = a || this.negativeMargin,
a = a >= 0 ? -1 * a: a,
c = this.getLastItem(),
0 === c.length ? b: c.offset().top + c.height() + a
},
this.getCurrentScrollOffset = function(a) {
var b = 0,
c = a.height();
return b = window === a.get(0) ? a.scrollTop() : a.offset().top,
( - 1 != navigator.platform.indexOf("iPhone") || -1 != navigator.platform.indexOf("iPod")) && (c += 80),
b + c
},
this.getNextUrl = function(b) {
return b = b || this.$container,
a(this.nextSelector, b).last().attr("href")
},
this.load = function(b, c, d) {
var e, f, g = this,
h = [],
i = +new Date;
d = d || this.defaultDelay;
var j = {
url: b
};
return g.fire("load", [j]),
a.get(j.url, null, a.proxy(function(b) {
e = a(this.itemsContainerSelector, b).eq(0),
0 === e.length && (e = a(b).filter(this.itemsContainerSelector).eq(0)),
e && e.find(this.itemSelector).each(function() {
h.push(this)
}),
g.fire("loaded", [b, h]),
c && (f = +new Date - i, d > f ? setTimeout(function() {
c.call(g, b, h)
},
d - f) : c.call(g, b, h))
},
g), "html")
},
this.render = function(b, c) {
var d = this,
e = this.getLastItem(),
f = 0,
g = this.fire("render", [b]);
g.done(function() {
a(b).hide(),
e.after(b),
a(b).fadeIn(400,
function() {++f < b.length || (d.fire("rendered", [b]), c && c())
})
})
},
this.hidePagination = function() {
this.paginationSelector && a(this.paginationSelector, this.$container).hide()
},
this.restorePagination = function() {
this.paginationSelector && a(this.paginationSelector, this.$container).show()
},
this.throttle = function(b, c) {
var d, e, f = 0;
return d = function() {
function a() {
f = +new Date,
b.apply(d, g)
}
var d = this,
g = arguments,
h = +new Date - f;
e ? clearTimeout(e) : a(),
h > c ? a() : e = setTimeout(a, c)
},
a.guid && (d.guid = b.guid = b.guid || a.guid++),
d
},
this.fire = function(a, b) {
return this.listeners[a].fireWith(this, b)
},
this.pause = function() {
this.isPaused = !0
},
this.resume = function() {
this.isPaused = !1
},
this
};
c.prototype.initialize = function() {
if (this.isInitialized) return ! 1;
var a = !!("onscroll" in this.$scrollContainer.get(0)),
b = this.getCurrentScrollOffset(this.$scrollContainer),
c = this.getScrollThreshold();
return a ? (this.hidePagination(), this.bind(), this.fire("ready"), this.nextUrl = this.getNextUrl(), b >= c ? (this.next(), this.one("rendered",
function() {
this.isInitialized = !0
})) : this.isInitialized = !0, this) : !1
},
c.prototype.reinitialize = function() {
this.isInitialized = !1,
this.unbind(),
this.initialize()
},
c.prototype.bind = function() {
if (!this.isBound) {
this.$scrollContainer.on("scroll", a.proxy(this.throttle(this.scrollHandler, 150), this));
for (var b = 0,
c = this.extensions.length; c > b; b++) this.extensions[b].bind(this);
this.isBound = !0,
this.resume()
}
},
c.prototype.unbind = function() {
if (this.isBound) {
this.$scrollContainer.off("scroll", this.scrollHandler);
for (var a = 0,
b = this.extensions.length; b > a; a++)"undefined" != typeof this.extensions[a].unbind && this.extensions[a].unbind(this);
this.isBound = !1
}
},
c.prototype.destroy = function() {
this.unbind(),
this.$scrollContainer.data("ias", null)
},
c.prototype.on = function(b, c, d) {
if ("undefined" == typeof this.listeners[b]) throw new Error('There is no event called "' + b + '"');
return d = d || 0,
this.listeners[b].add(a.proxy(c, this), d),
this
},
c.prototype.one = function(a, b) {
var c = this,
d = function() {
c.off(a, b),
c.off(a, d)
};
return this.on(a, b),
this.on(a, d),
this
},
c.prototype.off = function(a, b) {
if ("undefined" == typeof this.listeners[a]) throw new Error('There is no event called "' + a + '"');
return this.listeners[a].remove(b),
this
},
c.prototype.next = function() {
var a = this.nextUrl,
b = this;
if (this.pause(), !a) return this.fire("noneLeft", [this.getLastItem()]),
this.listeners.noneLeft.disable(),
b.resume(),
!1;
var c = this.fire("next", [a]);
return c.done(function() {
b.load(a,
function(a, c) {
b.render(c,
function() {
b.nextUrl = b.getNextUrl(a),
b.resume()
})
})
}),
c.fail(function() {
b.resume()
}),
!0
},
c.prototype.extension = function(a) {
if ("undefined" == typeof a.bind) throw new Error('Extension doesn\'t have required method "bind"');
return "undefined" != typeof a.initialize && a.initialize(this),
this.extensions.push(a),
this.isInitialized && this.reinitialize(),
this
},
a.ias = function(b) {
var c = a(window);
return c.ias.apply(c, arguments)
},
a.fn.ias = function(b) {
var d = Array.prototype.slice.call(arguments),
e = this;
return this.each(function() {
var f = a(this),
g = f.data("ias"),
h = a.extend({},
a.fn.ias.defaults, f.data(), "object" == typeof b && b);
if (g || (f.data("ias", g = new c(f, h)), a(document).ready(a.proxy(g.initialize, g))), "string" == typeof b) {
if ("function" != typeof g[b]) throw new Error('There is no method called "' + b + '"');
d.shift(),
g[b].apply(g, d)
}
e = g
}),
e
},
a.fn.ias.defaults = {
item: ".item",
container: ".listing",
next: ".next",
pagination: !1,
delay: 600,
negativeMargin: 10
}
} (jQuery);
var IASHistoryExtension = function(a) {
return a = jQuery.extend({},
this.defaults, a),
this.ias = null,
this.prevSelector = a.prev,
this.prevUrl = null,
this.listeners = {
prev: new IASCallbacks
},
this.onPageChange = function(a, b, c) {
if (window.history && window.history.replaceState) {
var d = history.state;
history.replaceState(d, document.title, c)
}
},
this.onScroll = function(a, b) {
var c = this.getScrollThresholdFirstItem();
this.prevUrl && (a -= this.ias.$scrollContainer.height(), c >= a && this.prev())
},
this.onReady = function() {
var a = this.ias.getCurrentScrollOffset(this.ias.$scrollContainer),
b = this.getScrollThresholdFirstItem();
a -= this.ias.$scrollContainer.height(),
b >= a && this.prev()
},
this.getPrevUrl = function(a) {
return a || (a = this.ias.$container),
jQuery(this.prevSelector, a).last().attr("href")
},
this.getScrollThresholdFirstItem = function() {
var a;
return a = this.ias.getFirstItem(),
0 === a.length ? -1 : a.offset().top
},
this.renderBefore = function(a, b) {
var c = this.ias,
d = c.getFirstItem(),
e = 0;
c.fire("render", [a]),
jQuery(a).hide(),
d.before(a),
jQuery(a).fadeIn(400,
function() {++e < a.length || (c.fire("rendered", [a]), b && b())
})
},
this
};
IASHistoryExtension.prototype.initialize = function(a) {
var b = this;
this.ias = a,
jQuery.extend(a.listeners, this.listeners),
a.prev = function() {
return b.prev()
},
this.prevUrl = this.getPrevUrl()
},
IASHistoryExtension.prototype.bind = function(a) {
a.on("pageChange", jQuery.proxy(this.onPageChange, this)),
a.on("scroll", jQuery.proxy(this.onScroll, this)),
a.on("ready", jQuery.proxy(this.onReady, this))
},
IASHistoryExtension.prototype.unbind = function(a) {
a.off("pageChange", this.onPageChange),
a.off("scroll", this.onScroll),
a.off("ready", this.onReady)
},
IASHistoryExtension.prototype.prev = function() {
var a = this.prevUrl,
b = this,
c = this.ias;
if (!a) return ! 1;
c.pause();
var d = c.fire("prev", [a]);
return d.done(function() {
c.load(a,
function(a, d) {
b.renderBefore(d,
function() {
b.prevUrl = b.getPrevUrl(a),
c.resume(),
b.prevUrl && b.prev()
})
})
}),
d.fail(function() {
c.resume()
}),
!0
},
IASHistoryExtension.prototype.defaults = {
prev: ".prev"
};
var IASNoneLeftExtension = function(a) {
return a = jQuery.extend({},
this.defaults, a),
this.ias = null,
this.uid = (new Date).getTime(),
this.html = a.html.replace("{text}", a.text),
this.showNoneLeft = function() {
var a = jQuery(this.html).attr("id", "ias_noneleft_" + this.uid),
b = this.ias.getLastItem();
b.after(a),
a.fadeIn()
},
this
};
IASNoneLeftExtension.prototype.bind = function(a) {
this.ias = a,
a.on("noneLeft", jQuery.proxy(this.showNoneLeft, this))
},
IASNoneLeftExtension.prototype.unbind = function(a) {
a.off("noneLeft", this.showNoneLeft)
},
IASNoneLeftExtension.prototype.defaults = {
text: "You reached the end.",
html: '<div class="zhanzhuai-loading"><span>已经加载到天涯海角,无内容了!</span></div>'
};
var IASPagingExtension = function() {
return this.ias = null,
this.pagebreaks = [[0, document.location.toString()]],
this.lastPageNum = 1,
this.enabled = !0,
this.listeners = {
pageChange: new IASCallbacks
},
this.onScroll = function(a, b) {
if (this.enabled) {
var c, d = this.ias,
e = this.getCurrentPageNum(a),
f = this.getCurrentPagebreak(a);
this.lastPageNum !== e && (c = f[1], d.fire("pageChange", [e, a, c])),
this.lastPageNum = e
}
},
this.onNext = function(a) {
var b = this.ias.getCurrentScrollOffset(this.ias.$scrollContainer);
this.pagebreaks.push([b, a]);
var c = this.getCurrentPageNum(b) + 1;
this.ias.fire("pageChange", [c, b, a]),
this.lastPageNum = c
},
this.onPrev = function(a) {
var b = this,
c = b.ias,
d = c.getCurrentScrollOffset(c.$scrollContainer),
e = d - c.$scrollContainer.height(),
f = c.getFirstItem();
this.enabled = !1,
this.pagebreaks.unshift([0, a]),
c.one("rendered",
function() {
for (var d = 1,
g = b.pagebreaks.length; g > d; d++) b.pagebreaks[d][0] = b.pagebreaks[d][0] + f.offset().top;
var h = b.getCurrentPageNum(e) + 1;
c.fire("pageChange", [h, e, a]),
b.lastPageNum = h,
b.enabled = !0
})
},
this
};
IASPagingExtension.prototype.initialize = function(a) {
this.ias = a,
jQuery.extend(a.listeners, this.listeners)
},
IASPagingExtension.prototype.bind = function(a) {
try {
a.on("prev", jQuery.proxy(this.onPrev, this), this.priority)
} catch(b) {}
a.on("next", jQuery.proxy(this.onNext, this), this.priority),
a.on("scroll", jQuery.proxy(this.onScroll, this), this.priority)
},
IASPagingExtension.prototype.unbind = function(a) {
try {
a.off("prev", this.onPrev)
} catch(b) {}
a.off("next", this.onNext),
a.off("scroll", this.onScroll)
},
IASPagingExtension.prototype.getCurrentPageNum = function(a) {
for (var b = this.pagebreaks.length - 1; b > 0; b--) if (a > this.pagebreaks[b][0]) return b + 1;
return 1
},
IASPagingExtension.prototype.getCurrentPagebreak = function(a) {
for (var b = this.pagebreaks.length - 1; b >= 0; b--) if (a > this.pagebreaks[b][0]) return this.pagebreaks[b];
return null
},
IASPagingExtension.prototype.priority = 500;
var IASSpinnerExtension = function(a) {
return a = jQuery.extend({},
this.defaults, a),
this.ias = null,
this.uid = (new Date).getTime(),
this.src = a.src,
this.html = a.html.replace("{src}", this.src),
this.showSpinner = function() {
var a = this.getSpinner() || this.createSpinner(),
b = this.ias.getLastItem();
b.after(a),
a.fadeIn()
},
this.showSpinnerBefore = function() {
var a = this.getSpinner() || this.createSpinner(),
b = this.ias.getFirstItem();
b.before(a),
a.fadeIn()
},
this.removeSpinner = function() {
this.hasSpinner() && this.getSpinner().remove()
},
this.getSpinner = function() {
var a = jQuery("#ias_spinner_" + this.uid);
return a.length > 0 ? a: !1
},
this.hasSpinner = function() {
var a = jQuery("#ias_spinner_" + this.uid);
return a.length > 0
},
this.createSpinner = function() {
var a = jQuery(this.html).attr("id", "ias_spinner_" + this.uid);
return a.hide(),
a
},
this
};
IASSpinnerExtension.prototype.bind = function(a) {
this.ias = a,
a.on("next", jQuery.proxy(this.showSpinner, this)),
a.on("render", jQuery.proxy(this.removeSpinner, this));
try {
a.on("prev", jQuery.proxy(this.showSpinnerBefore, this))
} catch(b) {}
},
IASSpinnerExtension.prototype.unbind = function(a) {
a.off("next", this.showSpinner),
a.off("render", this.removeSpinner);
try {
a.off("prev", this.showSpinnerBefore)
} catch(b) {}
},
IASSpinnerExtension.prototype.defaults = {
html: '<div class="zhanzhuai-loading"><div class="load-icon load-icon-1"></div> <div class="load-icon load-icon-2"></div> <div class="load-icon load-icon-3"></div> <span>玩命加载中...</span></div>'
};
var IASTriggerExtension = function(a) {
return a = jQuery.extend({},优艾设计网_设计LOGO
this.defaults, a),
this.ias = null,
this.html = a.html.replace("{text}", a.text),
this.htmlPrev = a.htmlPrev.replace("{text}", a.textPrev),
this.enabled = !0,
this.count = 0,
this.offset = a.offset,
this.$triggerNext = null,
this.$triggerPrev = null,
this.showTriggerNext = function() {
if (!this.enabled) return ! 0;
if (!1 === this.offset || ++this.count < this.offset) return ! 0;
var a = this.$triggerNext || (this.$triggerNext = this.createTrigger(this.next, this.html)),
b = this.ias.getLastItem();
return b.after(a),
a.fadeIn(),
!1
},
this.showTriggerPrev = function() {
if (!this.enabled) return ! 0;
var a = this.$triggerPrev || (this.$triggerPrev = this.createTrigger(this.prev, this.htmlPrev)),
b = this.ias.getFirstItem();
return b.before(a),
a.fadeIn(),
!1
},
this.onRendered = function() {
this.enabled = !0
},
this.createTrigger = function(a, b) {
var c, d = (new Date).getTime();
return b = b || this.html,
c = jQuery(b).attr("id", "ias_trigger_" + d),
c.hide(),
c.on("click", jQuery.proxy(a, this)),
c
},
this
};
IASTriggerExtension.prototype.bind = function(a) {
this.ias = a,
a.on("next", jQuery.proxy(this.showTriggerNext, this), this.priority),
a.on("rendered", jQuery.proxy(this.onRendered, this), this.priority);
try {
a.on("prev", jQuery.proxy(this.showTriggerPrev, this), this.priority)
} catch(b) {}
},
IASTriggerExtension.prototype.unbind = function(a) {
a.off("next", this.showTriggerNext),
a.off("rendered", this.onRendered);
try {
a.off("prev", this.showTriggerPrev)
} catch(b) {}
},
IASTriggerExtension.prototype.next = function() {
this.enabled = !1,
this.ias.pause(),
this.$triggerNext && (this.$triggerNext.remove(), this.$triggerNext = null),
this.ias.next()
},
IASTriggerExtension.prototype.prev = function() {
this.enabled = !1,
this.ias.pause(),
this.$triggerPrev && (this.$triggerPrev.remove(), this.$triggerPrev = null),
this.ias.prev()
},
IASTriggerExtension.prototype.defaults = {
text: "加载更多",
html: '<div class="zhanzhuai-ajax-more" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
textPrev: "Load previous items",
htmlPrev: '<div class="ias-trigger ias-trigger-prev" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
offset: 0
},
IASTriggerExtension.prototype.priority = 1e3;
qkoufu9966 2022-0优艾设计网_设计客1-19 17:39
不懂代码解释出来也不会懂
少年少年 优艾设计网_Photoshop论坛 2022-01-19 17:43
使用现成得插件吧
qkoufu3292 2022-01-19 17:47 优艾设计网_设计百科
网上找现成得jq插件吧
精彩评论