自定義基於jquery豎向瀑布流插件

公司新項目做了一個關於圖片的板塊，網上找了一些瀑布流插件都不是很適合自己，於是就自己造輪子寫一個，並封裝成插件github

於是就想分享一下，主要是為了更好的學習與記憶。

如果大家進來了，希望能給我github點個免費star，你輕輕的來，不要悄悄的走嘛。感謝大佬- -

下面介紹一下（也可以去github看）

jquery-waterfall

• 一款簡單jq插件，配載es6語法的豎向瀑布流

插件特點：

• 數據靈活，可以后台請求數據載入頁面也可以直接在html中加入元素，一般放第一頁
• 同個頁面可以放置多個，使用tab切換無刷新
• 頁面滾動至底部前自動請求加載數據
• 數據底部動態生成加載提示或已加載結束
• 可配置是否適應resize，通用pc到手機響應式
• 自定義瀑布流元素之間間距，內容根據樣式寬度自適應放入數量
• es6語法promise函數，保證圖片加載后布局

---

插件依賴

• jQuery 2.1.4
• 插件環境es6語法，瀏覽器中需要babel轉義

使用方法

1. 在jquery.js后引入
2. 自定義瀑布流容器,設置初始高度，需要相對定位
3. 自定義瀑布流元素,定義寬度與默認樣式，高度根據圖片自適應（默認class="item"）
4. 容器調用插件方法

// 接受參數
/*
	** item: '.item',  瀑布流元素類名
    ** spaceBetween: 10, 元素間距
    ** resize: true, 是否根據窗口自適應
    ** checkNav: '', 這邊是當有tab切換，tab元素父容器
    ** ajaxData: null, 滾動加載數據自定義函數，處理數據方法等，自定義方便使用
    ** tipObj: { 動態加載數據底部提示框
        tipDom: '#no-data',
        text0: '已經到底啦~',
        text1: '↓ 下拉加載更多',
    }, 

*/

// ajaxData： fn(success) ,這里回調函數接受一個函數參數，數據獲取成功需要主動調用一下
// 如果有數據 success(str, 1), 沒有數據success('', 0)
// str 是你這里處理過返回瀑布流元素字符串


// 舉例

// 瀑布流元素
let template = `
	<li class="item" data-id="{ id }">
		<a href="{ url }" title="{ title }">
			<img src="{ thumb }" title="{ title }">
			<div class="mask">
				<div class="img-operate">
					<span class="collect"><i class="icon-collect"></i></span>
					<span class="download-other fr">源文件</span>
					<span class="download-jpg fr">原圖</span>
				</div>
				<div class="img-title common_ovh">{ title }</div>
			</div>
		</a>
	</li>`;
let curPage = 2, filterData = { 一些數據 };

// 后台獲取數據接口方法
function getListAjax(callback) {
		let data = filterData;
		data.page = curPage;

        $.ajax({
        	url: '/api/get_photo_list',
        	type: 'POST',
        	data: data,
        })
        .done(function(res) {
        	let str = "";
        	if(res.code == 200) {
		        $.each(res.data, function(index, el) {
		        	str += template
		        		.replace("{ thumb }", el.thumb)
		        		.replace("{ id }", el.id)
		        		.replace("{ url }", el.url)
		        		.replace(/{ title }/g, el.title)
		        });

		        curPage++;
        	}
        	callback(res, str)
        })
        .fail(function(error) {
        	console.log(error);
        })
	};

容器.toWaterfall({
		ajaxData: function(success) {
			getListAjax(function(res, str) {
				if(res.code == 200) {
			        $bigSmall.append($(str));
			        success(str, res.next);
	        	}else {
	        		success('', 0);
	        	}
			})
		}
	})

---

效果圖

項目地址在www.macdown.com 素材分支里