目錄

• • 需求與思路：
  • • 渲染數(shù)據(jù)篇
    • 瀑布流插件篇

需求與思路：

需求：發(fā)起一個ajax請求，拿到數(shù)據(jù)之后，渲染頁面

• 渲染數(shù)據(jù)的思路：

  • 1：先發(fā)起一個ajax請求（反向代理后，路徑的配置，還有id的中文轉碼）
  • 2：在.then后面拿到數(shù)據(jù)，或者成功的回調函數(shù)之中拿到數(shù)據(jù)，渲染數(shù)據(jù)
  • 3：渲染數(shù)據(jù)封裝為一個函數(shù)，但是為了避免圖片失真，
    • 3-01：首先先設置一個圖片的等比例縮放（等寬等高的那種，已知當前的img的寬，還有實際圖片的寬高，直接求當前的高就好）

• 瀑布流插件的實現(xiàn)：
  調用的時候：在發(fā)起ajax的時候，我們需要進行排序，就是每一個li需要調用瀑布流插件 然后把最大的列數(shù)傳遞到瀑布流插件里面（對象的形式）
  封裝插件的時候：

  • 1：需要一個立即執(zhí)行函數(shù)，并且;😭)(); 這樣設置，防止方法的重疊，達到調用！ 還有把jQuery當做參數(shù)傳遞進去
  • 2：創(chuàng)建一個li的存儲每一項高度列表數(shù)組，還有創(chuàng)建一個瀑布流插件方法 waterFall() 參數(shù)為對象
    • 3：先設置默認配置參數(shù)，需要使用到 $.extend({},opt)對象的合并方法
    • 4：開始瀑布流插件的內部邏輯
      • 4-1：由于插件方法是創(chuàng)建在原型對象身上，那么數(shù)據(jù)也就是存儲與this之中，我們遍歷this的長度即可
      • 4-2：遍歷之中，先設置第一排數(shù)據(jù)，根據(jù)調用方法傳遞的最大列數(shù)判斷，把this之中的img高度推入數(shù)組之中 if()
      • 4-3：否則 else{} 我們拿到前面的數(shù)組高度，尋找到最小高度的元素，根據(jù)最小高度元素，去數(shù)組中查詢對應的索引號
      • 4-4：然后我們需要設置每一項的li的left和top值 也就是 this.eq(i).offset({ left: ,top: })
      • 4-5：其中這left值的話，就是this.eq(最小高度索引號).offset().left 而top值 直接是最小高度 +20 間距
      • 4-6：拼接結束后，我們需要設置一下最小高度這個元素的top值，因為下一次循環(huán)是拿到這元素的高度，和當前的其他三個進行比較的！
        // * 數(shù)組[最小索引號] += 當前的高度 this.eq(i).height() + 20

渲染數(shù)據(jù)篇

//CSS* {margin: 0;padding: 0;}li,ul {list-style: none;}.container {margin: 0 auto;width: 1000px;}.wrapper {width: 1000px;overflow: hidden;background: yellow;}.wrapper li {float: left;margin-right: 20px;width: 235px;}.wrapper li img {width: 100%;}.wrapper li p {padding-left: 10px;height: 30px;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.wrapper li:nth-of-type(4n) {margin-right: 0px;}//HTML<!-- 容器 --><div class="container"><ul class="wrapper"><!-- <li><img src="https://c-ssl.duitang.com/uploads/item/202004/21/20200421222241_TvCXF.thumb.400_0.jpeg" alt=""><p>粘土手作希小怪</p></li> --></ul></div>//JS$(function () {//01：發(fā)起一個ajax請求，拿到數(shù)據(jù)，渲染到頁面之中// url="http://www.duitang.com/napi/blog/list/by_filter_id/ => 反向代理了 直接輸入這個即可 http://localhost/dt// ?include_fields=top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count&filter_id=%E6%89%8B%E5%B7%A5DIY&start=24&_=1595034833394"$.ajax({url: "http://localhost/dt",data: {include_fields: "top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count",filter_id: "手工DIY", //需要把uncode碼轉換為中文！start: 0,_: Date.now()}}).then(function (res) {var data = res.data.object_list //拿到數(shù)據(jù) 以數(shù)組的形式//調用渲染函數(shù) 渲染頁面render(data);//每一個li調用瀑布流插件$(".wrapper li").waterFall({max_col: 4})})function render(data) {//需要考慮到圖片的高，為了避免圖片失真，需要等比例縮放 寬高var n_w = 235; //當前的圖片寬度var w = 625; //圖片的實際寬度var h = 1000; //圖片的實際高度var n_h = parseInt((n_w / w) * h); //當前的圖片需要設置的高度！var html = ""html = data.map(function (item, i) {return `<li><img style="width: ${n_h};" src="${ item.photo.path }" alt=""><p>${ item.msg }</p></li>`}).join("")$(".wrapper").html(html);}})

瀑布流插件篇

;; (function () {//1：定義一個高度數(shù)組，為了存放每一個li元素的高度var height_list = [];//2：定義一個被瀑布流的插件方法 $.fn.waterFall = function (options) {//2-1：設置默認參數(shù)options = $.extend({max_col: 3}, options)//2-2：遍歷所有的li// console.log(this); //所有的li元素，都是存儲在li之中for (var i = 0; i < this.length; i++) {//2-3：首先先設置的第一排元素的高度，推入高度數(shù)組之中，if (i < options.max_col) {height_list.push(this.eq(i).height());} else {//2-4：接下來設置 后面的元素 就是根據(jù)最小的高度，找到最小索引號var min_height = Math.min.apply(false, height_list); //最小的高度var min_index = height_list.indexOf(min_height); //最小索引號// console.log(min_index);//2-5：拿到所有的索引號，設置left和top 進行拼接this.eq(i).offset({left: this.eq(min_index).offset().left,top: min_height + 20})//2-6：拼接了一個元素后，需要把當前的最小索引號的高度重新設置一下 console.log(height_list[min_index]); //拿到當前數(shù)組中最小索引號中的值 疊加上拼接的當前元素的高度 在賦值給當前的最小索引號的值height_list[min_index] += this.eq(i).height() + 20;//進行了這一次拼接接受后，就進入到了下一次循環(huán)，再一次查詢最小高度！}}console.log(height_list);}})(jQuery);

總結

以上是生活随笔為你收集整理的使用jq来封装一个瀑布流插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。