The company's new project has made a plate about pictures. It found some waterfall plug-ins on the Internet that are not very suitable for itself, so it made its own wheel to write one and encapsulate it into a plug-in
So I want to share it, mainly for better learning and memory.
If you come in, I hope you can give me github a free star. Come gently, don't go quietly. Thank you-
Here is an introduction (you can also go github see
jquery-waterfallwaterfall with jquery prototype function
A simple jq plug-in with es6 syntax for vertical waterfall flowPlug in features:
- The data is flexible. You can request the data loading page in the background or add elements directly to the html. Generally, the first page is placed
- Multiple pages can be placed on the same page. Use tab to switch between no refresh
- Automatically request to load data before page scrolls to the bottom
- Dynamically generate loading prompt at the bottom of the data or end of loading
- Can be configured to adapt to resize, general pc to mobile response
- Customize the spacing between waterfall flow elements, and the content can be placed according to the style width
- es6 syntax promise function to ensure the layout of pictures after loading
Plug in dependency
- jQuery 2.1.4
- Plug in environment es6 syntax, browser needs babel escape
Usage method
- Introduced after jquery.js
- Custom waterfall flow container, set initial height, need relative positioning
- Customize waterfall flow elements, define width and default style, and adjust height according to pictures (default class="item")
- Container calls plug-in method
// Acceptance parameter /* ** item: '.item', Waterfall flow element class name ** spaceBetween: 10, Element spacing ** resize: true, Whether to adapt to the window ** checkNav: '', Here is when there is a tab switch, the parent container of the tab element ** ajaxData: null, Scroll load data custom function, data processing method, etc., user-defined and easy to use ** tipObj: { Prompt box at the bottom of dynamic loading data tipDom: '#no-data', text0: 'It's all over ~ ', text1: '↓ Drop down to load more ', }, */ // ajaxData: fn(success). Here, the callback function takes a function parameter. If the data is obtained successfully, you need to call it actively // If there is data success(str, 1), there is no data success('', 0) // str is the return waterfall element string that you have processed here // Give an example // Waterfall flow element let template = ` <li data-id="{ id }"> <a href="{ url }" title="{ title }"> <img src="{ thumb }" title="{ title }"> <div> <div> <span><i></i></span> <span>source file</span> <span>Original graph</span> </div> <div>{ title }</div> </div> </a> </li>`; let curPage = 2, filterData = { Some data }; // Background data acquisition interface method 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); }) }; //Container. toWaterfall({ ajaxData: function(success) { getListAjax(function(res, str) { if(res.code == 200) { $bigSmall.append($(str)); success(str, res.next); }else { success('', 0); } }) } })
Design sketch
