15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 js

jQuery 响应式瀑布流布局插件,瀑布流页面

孙正萌| 发布于 2022-09-24 10:32:27| 538阅读| 0点赞| 0评论
举报




<div class="wall"> <a class="article" href="#"> <img src="http://qinfenniao.oss-cn-beijing.aliyuncs.com/e0edac6edef64f1229536cbe47a29b82.jpg">
				<h2>Cursus cursus proin auctor in in ac, nunc, tortorh2>
			a>
			<div class="article"> <img src="http://qinfenniao.oss-cn-beijing.aliyuncs.com/0e26c9c898b7ed41df342c37f61049df.png">
				<h2>Cursus cursus proin auctor in in ac, nunc, tortorh2>
			div>
			<div class="article"> <img src="http://qinfenniao.oss-cn-beijing.aliyuncs.com/9c02df227295e57325c6cf9b62d1598d.jpg">
				<h2>Cursus cursus proin auctor in in ac, nunc, tortorh2>
			div>
			<div class="article"> <img src="http://qinfenniao.oss-cn-beijing.aliyuncs.com/dd73afb5669f44cae831de93ff80b35f.png">
				<h2>Cursus cursus proin auctor in in ac, nunc, tortorh2>
			div>
			<div class="article"> <img src="http://qinfenniao.oss-cn-beijing.aliyuncs.com/fc53bda4128bebf42e6df7435dac6b34.jpg">
				<h2>Cursus cursus proin auctor in in ac, nunc, tortorh2>
			div>
			<div class="article"> <img src="http://qinfenniao.oss-cn-beijing.aliyuncs.com/a5173c7e87feb7baa66653154f74d15a.jpg">
				<h2>Cursus cursus proin auctor in in ac, nunc, tortorh2>
			div>
		div>


.article {display:block;margin:0 0 30px 0;padding:12px;background:white;border-radius:3px;box-shadow:0px 1px 2px 0px rgba(0,0,0,0.05);transition:all 220ms;}
.article:hover {box-shadow:0px 2px 3px 1px rgba(0,0,0,0.1);transform:translateY(-5px);transition:all 220ms;}
.article > img {display:block;width:100%;margin:0 0 24px 0;}
.article h2 {text-align:center;font-size:14px;text-transform:uppercase;margin:0 0 12px 0;}
.wall {display:block;position:relative;}
.wall-column {display:block;position:relative;/*width:33.333333%;*/  width:25%;float:left;padding:0 12px;box-sizing:border-box;}
@media (max-width:640px) {.wall-column {width:50%;}
}
@media (max-width:480px) {.wall-column {width:auto;float:none;}
}



"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(n){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(jsON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(t){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){return window.CP.PenTimer.shouldStopLoop(o)},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};
(function ($) {
    $.fn.jaliswall = function (options) {
        this.each(function () {
            var defaults = {
                item: '.wall-item',
                columnClass: '.wall-column',
                resize: true
            };
            var prm = $.extend(defaults, options);
            var container = $(this);
            var items = container.find(prm.item);
            var elemsDatas = [];
            var columns = [];
            var nbCols = getNbCols();
            init();
            function init() {
                nbCols = getNbCols();
                recordAndRemove();
                print();
                if (prm.resize) {
                    $(window).resize(function () {
                        if (nbCols != getNbCols()) {
                            nbCols = getNbCols();
                            setColPos();
                            print();
                        }
                    });
                }
            }
            function getNbCols() {
                var instanceForCompute = false;
                if (container.find(prm.columnClass).length == 0) {
                    instanceForCompute = true;
                    container.append('
+ parseSelector(prm.columnClass) + '\'>
'
); } var colWidth = container.find(prm.columnClass).outerWidth(true); var wallWidth = container.innerWidth(); if (instanceForCompute) container.find(prm.columnClass).remove(); return Math.round(wallWidth / colWidth); } function recordAndRemove() { items.each(function (index) { var item = $(this); elemsDatas.push({ content: item.html(), class: item.attr('class'), href: item.attr('href'), id: item.attr('id'), colid: index % nbCols }); item.remove(); }); } function setColPos() { for (var i in elemsDatas) { if (window.CP.shouldStopExecution(1)) { break; } elemsDatas[i].colid = i % nbCols; } window.CP.exitedLoop(1); } function parseSelector(selector) { return selector.slice(1, selector.length); } function print() { var tree = ''; for (var i = 0; i < nbCols; i++) { if (window.CP.shouldStopExecution(2)) { break; } tree += '
+ parseSelector(prm.columnClass) + '\'>
'
; } window.CP.exitedLoop(2); container.html(tree); for (var i in elemsDatas) { var html = ''; var content = elemsDatas[i].content != undefined ? elemsDatas[i].content : ''; var href = elemsDatas[i].href != href ? elemsDatas[i].href : ''; var classe = elemsDatas[i].class != undefined ? elemsDatas[i].class : ''; var id = elemsDatas[i].id != undefined ? elemsDatas[i].id : ''; if (elemsDatas[i].href != undefined) { html += ' + getAttr(href, 'href') + ' ' + getAttr(classe, 'class') + ' ' + getAttr(id, 'id') + '>' + content + ''; } else { html += '
+ getAttr(classe, 'class') + ' ' + getAttr(id, 'id') + '>' + content + ''; } container.children(prm.columnClass).eq(i % nbCols).append(html); } } function getAttr(attr, type) { return attr != undefined ? type + '=\'' + attr + '\'' : ''; } }); return this; }; }(jQuery));



<script type="text/javascript">
	$(function(){
		$('.wall').jaliswall({ item: '.article' });
	});
	script>


简单的瀑布流效果适用于任何网页的图片展示,代码干净。

在线测试地址


0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

孙正萌
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部