9169-php/Public/bibidd/js/photo.js

$(document).ready(function () {
  $(".logo").on("click", function () {
    window.location.href = "https://www.bibidd.com";
  });
  $(".quanpinghei").hide();

  var uid = localStorage.getItem("uid");
  
  if (uid) {
    $("#register").text("My Collection");
    $("#login").text("Log out");
    $("#login").css("backgroundColor", "#D6565A");
  } else {
    $("#register").text("Sign up");
    $("#login").text("Login");
    $("#login").css("backgroundColor", "#CE5C2A");
  }
  // 获取标签数据
  var labelcurrentid = 1;
  var labelDataArray = [];
  var lpage = 1;
  var labelname = "";
  function getlabelData(videopage) {
    $(".box").show();

    $.ajax({
      type: "post",
      url: "https://www.bibidd.com/bibidd/Mediaonefive/shouye_resou_img_video",
      dataType: "json",
      data: {
        type: "img",
        page: videopage,
      },
      success: function (res) {
        
        labelDataArray = res.data;
      },
      complete: function (res) {
        
        // 分页
        let code = res.responseJSON.code;
        let dataNum = res.responseJSON.all_num;

        $(function () {
          $("#pagination3").pagination({
            currentPage: labelcurrentid,
            totalPage: Math.ceil(dataNum / 30),
            isShow: true,
            count: 7,
            homePageText: "One",
            endPageText: "Last",
            prevPageText: "Prev",
            nextPageText: "Next",
            callback: function (current) {
              labelcurrentid = current;
              getlabelData(labelcurrentid);
            },
          });
          Math.ceil(dataNum / 30) < 2?$('.firstPage').show():$('.firstPage').hide();
        });

        let labelHtml = "";

        labelHtml += '<div class="hotLabel">';
        $.each(labelDataArray, function (index, data) {
          labelHtml += '<div class="label">';
          labelHtml += "<p >" + data.name + "</p>";
          labelHtml += "<p >" + data.num + "</p>";
          labelHtml += "</div>";
        });
        labelHtml += "</div>";
        $(".labelpage").html(labelHtml);
        // 标签检索图片
        $(".label").on("click", function () {

          let nn = $(this).find("p").eq(0).text();
          $(location).attr('href', 'photo.html?labelname='+nn);
          return;

          loadVideoBackground();
          $(".videopage").show();

          $(".labelpage").hide();
          let name = $(this).find("p").eq(0).text();
          $("h2").text(name);

          labelname = name;
          lpage = 1;
          getLabelVideoData(1);
        });
      },
    });
  }

  var dataArray = [];
  var allDataArray = [];
  var videotype = "zuixin";
  let currentid = 1;
  // 获取图片数据
  function getData(videopage) {
    $("#tip").hide();
    clearScroll();
    $('.bottomLoadContent').show();
    $.ajax({
      type: "post",
      url: "https://www.bibidd.com/bibidd/Mediaonefive/imgs_info_list",
      dataType: "json",
      data: {
        type: videotype,
        page: videopage,
      },
      success: function (res) {
        
        allDataArray = res.data;
        dataArray = [];
        if (allDataArray.length > 0) {
          let showDataNum =
            allDataArray.length % 12 === 0 ? 12 : allDataArray.length % 12;
          for (let i = 0; i < showDataNum; i++) {
            dataArray.push(allDataArray[i]);
          }
        }
      },
      complete: function (res) {
        ispage = true;
        // 分页
        let code = res.responseJSON.code;
        let dataNum = res.responseJSON.all_num;

        $(function () {
          $("#pagination3").pagination({
            currentPage: currentid,
            totalPage: Math.ceil(dataNum / 36),
            isShow: true,
            count: 7,
            homePageText: "One",
            endPageText: "Last",
            prevPageText: "Prev",
            nextPageText: "Next",
            callback: function (current) {
              currentid = current;
              getData(currentid, videotype);
            },
          });
          Math.ceil(dataNum / 36) < 2?$('.firstPage').show():$('.firstPage').hide();
        });

        createDomHtml(dataArray);

        $("html, body").animate(
          {
            scrollTop: 0,
          },
          10
        );
      },
    });
  }
  let url = window.location.search;
  
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    strs = str.split("&");
    for (var i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = unescape(
        decodeURIComponent(strs[i].split("=")[1])
      );
    }
  }

  if (theRequest.navtag) {
    $("#tip").hide();
    // 其他页面进入首页
    if (theRequest.navtag === "Classify") {
      getlabelData(labelcurrentid);
      $(".videopage").hide();
      $(".labelpage").show();
    } else {
      loadVideoBackground();
      $(".videopage").show();
      $(".labelpage").hide();

      if (
        theRequest.navtag !== "Newest" &&
        theRequest.navtag !== "Hot" &&
        theRequest.navtag !== "Recommend" &&
        theRequest.navtag !== "Classify"
      ) {
        $(".searchInput").val(theRequest.navtag);
        $("h2").text("Image Search-" + theRequest.navtag);
        searchVideo(1);
      } else {
        $("h2").text(theRequest.navtag + " picture");
        if (theRequest.navtag === "Newest") {
          videotype = "zuixin";
        } else if (theRequest.navtag === "Hot") {
          videotype = "remen";
        } else if (theRequest.navtag === "Recommended") {
          videotype = "tuijian";
        }
        currentid = 1;
        getData(1);
      }
    }
  }else if(theRequest.labelname){
    labelname = theRequest.labelname;
    $("h2").text(theRequest.labelname);
    
    getLabelVideoData(1);
  } else {
    // 进入首页
    videotype = "zuixin";
    currentid = 1;
    getData(1);
  }

  if (theRequest.navtag) {
    // 其他页面进入首页
    if (theRequest.navtag === "Classify") {
      getlabelData(labelcurrentid);
      $(".videopage").hide();

      $(".labelpage").show();
    } else {
      $("h2").text(
        theRequest.navtag !== "Newest" &&
          theRequest.navtag !== "Hot" &&
          theRequest.navtag !== "Recommend" &&
          theRequest.navtag !== "Classify"
          ? "Image Search-" + theRequest.navtag
          : theRequest.navtag + " picture"
      );
      loadVideoBackground();
      $(".videopage").show();

      $(".labelpage").hide();
      if (theRequest.navtag === "Newest") {
        videotype = "zuixin";
      } else if (theRequest.navtag === "Hot") {
        videotype = "remen";
      } else if (theRequest.navtag === "Recommend") {
        videotype = "tuijian";
      }
      currentid = 1;
      getData(1);
    }
  } else {
    // 进入首页
    videotype = "zuixin";
    currentid = 1;
    getData(1);
  }
  // 热门tag分类
  $(".nav li").on("click", function () {
    clearScroll();
    $('.bottomLoadContent').show();
    const pname = $(this).find("p").eq(0).text();
    const arr = ["zuixin", "remen", "tuijian"];
    $("h2").text(pname + " picture");
    if (
      $(this).index() === 0 ||
      $(this).index() === 1 ||
      $(this).index() === 2
    ) {
      $(".videopage").show();
      $(".labelpage").hide();
      loadVideoBackground();
      videotype = arr[$(this).index()];
      currentid = 1;
      getData(1);
    } else {
      getlabelData(labelcurrentid);
      $(".videopage").hide();
      $(".labelpage").show();
    }
  });

  // 图片搜索
  $(".searchBtn").on("click", function () {
    $("#tip").hide();
    if (!$(".searchInput").val().trim()) {
      // 请输入搜索关键字
      tip("Please enter the search content");
    } else {
      loadVideoBackground();
      $(".videopage").show();
      searchVideo(1);
      $(".labelpage").hide();
      $("h2").text("Image Search-" + $(".searchInput").val().trim());
    }
  });

  $(document).on("keyup", function (event) {
    if (event.keyCode == 13) {
      $(".searchBtn").trigger("click");
    }
  });
  // 底部标签栏
  $(".tabbar li").on("click", function () {
    if ($(this).index() === 0) {
      $(location).attr("href", 'https://www.bibidd.com/bibidd_testtest');
    }
    // } else if ($(this).index() === 1) {
    //   $(location).attr("href", "novel.html");
    // }
  });

  // 注册/登录
  $(".accountRight").on("click", function () {
    $(".loginBox").show();
  });
  $(".guanbi").on("click", function () {
    $(".loginBox").hide();
  });

  // 查看我的收藏
  $("#register").on("click", function () {
    if ($(this).text() === "My Collection") {
      $(location).attr("href", 'collection.html');
    } else {
      // 注册
      $(location).attr("href", 'register.html');
    }
    $(".loginBox").hide();
  });

  // 登录/退出登录
  $("#login").on("click", function () {
    if ($(this).text() === "Log out") {
      // 退出登录
      localStorage.removeItem("uid");
      location.reload();
    } else {
      // 登录
      $(location).attr("href", 'blogin.html');
    }
    $(".loginBox").hide();
  });
  // 返回顶部
  $(".backToTop").on("click", function () {
    $("html, body").animate(
      {
        scrollTop: 0,
      },
      500
    );
  });
  // 获取标签图片
  function getLabelVideoData(labelpage) {
    clearScroll();
    $('.bottomLoadContent').show();
    $.ajax({
      type: "post",
      url: "https://www.bibidd.com/bibidd/Mediaonefive/select_type_detail",
      dataType: "json",
      data: {
        type_name: labelname,
        type: "img",
        page: labelpage,
      },
      success: function (res) {
        
        allDataArray = res.data;
        dataArray = [];
        if (allDataArray.length > 0) {
          let showDataNum =
            allDataArray.length % 12 === 0 ? 12 : allDataArray.length % 12;
          for (let i = 0; i < showDataNum; i++) {
            dataArray.push(allDataArray[i]);
          }
        }
      },
      complete: function (res) {
        ispage = true;
        // 分页
        let code = res.responseJSON.code;
        let dataNum = res.responseJSON.all_num;
        $(function () {
          $("#pagination3").pagination({
            currentPage: lpage,
            totalPage: Math.ceil(dataNum / 36),
            isShow: true,
            count: 7,
            homePageText: "One",
            endPageText: "Last",
            prevPageText: "Prev",
            nextPageText: "Next",
            callback: function (current) {
              lpage = current;
              getLabelVideoData(lpage);
            },
          });
          Math.ceil(dataNum / 36) < 2?$('.firstPage').show():$('.firstPage').hide();
        });
        createDomHtml(dataArray);

        $("html, body").animate(
          {
            scrollTop: 0,
          },
          10
        );
      },
    });
  }
  // 图片加载背景
  function loadVideoBackground() {
  }

  // 视频搜索
  var searchcurrentid = 1;
  function searchVideo(videopage) {
    clearScroll();
    $('.bottomLoadContent').show();
    let searchInputVal = $(".searchInput").val();
    $.ajax({
      type: "post",
      url: "https://www.bibidd.com/bibidd/Mediaonefive/sousuo_img_video",
      dataType: "json",
      data: {
        type_name: searchInputVal,
        type: "img",
        page: videopage,
      },
      success: function (res) {
        
        allDataArray = res.data;
        if(allDataArray.length==0) {
          $("#tip").show();
          $(".tiptext").text('The data you need is not found.');
          $('.bottomLoadContent').hide();
        }else{
          $("#tip").hide();
        }
        dataArray = [];
        if (allDataArray.length > 0) {
          let showDataNum =
            allDataArray.length % 12 === 0 ? 12 : allDataArray.length % 12;
          for (let i = 0; i < showDataNum; i++) {
            dataArray.push(allDataArray[i]);
          }
        }
      },
      complete: function (res) {
        ispage = true;

        // 分页
        let code = res.responseJSON.code;
        let dataNum = res.responseJSON.all_num;
        $(function () {
          $("#pagination3").pagination({
            currentPage: searchcurrentid,
            totalPage: Math.ceil(dataNum / 36),
            isShow: true,
            count: 7,
            homePageText: "One",
            endPageText: "Last",
            prevPageText: "Prev",
            nextPageText: "Next",
            callback: function (current) {
              searchcurrentid = current;
              searchVideo(searchcurrentid, videotype);
            },
          });
          Math.ceil(dataNum / 36) < 2?$('.firstPage').show():$('.firstPage').hide();
        });
        createDomHtml(dataArray);
        $("html, body").animate(
          {
            scrollTop: 0,
          },
          10
        );
      },
    });
  }

  function tip(text) {
    $("#tip").show();
    $(".tiptext").text(text);
    setTimeout(() => {
      $("#tip").hide();
    }, 1000);
  }

    // 上拉加载更多
    var showVideoNum = 12;
    var ispage = true;
    $(window).scroll(function () {
      var scrollT = $(document).scrollTop();
  
      var offsetT = $(".main").offset().top;
  
      if (scrollT >= offsetT) {
        $(".backToTop").show();
      } else {
        $(".backToTop").hide();
      }
  
      let windowHeight = $(window).height();
      let windowScrollTop = $(window).scrollTop();
      let loadingHeight = $('.bottomLoadContent').height();
      if (windowHeight + windowScrollTop + loadingHeight >= $(document).height()) {
        if (ispage) {
          ispage = false;
          if (showVideoNum != 36) {
            $(".bottomLoadContent").show();
            $(".box").hide();
            showVideoNum += 12;
            showVideoNum =
              showVideoNum > allDataArray.length
                ? allDataArray.length
                : showVideoNum;
            dataArray = [];
            for (let i = 0; i < 12; i++) {
              dataArray.push(allDataArray[(showVideoNum-12+i)]);
            }
            let videoHtml = "";
            $.each(dataArray, function (index, data) {
              videoHtml += '<div class="videoContent">';
              videoHtml +=
                '<div class="lazy videoPhoto" data-original="' +
                data.top_img +
                '"></div>';
              videoHtml += '  <div class="videoTitle">' + data.title + "</div>";
              videoHtml += '  <div class="videoData">';
              videoHtml += "    <!-- 观看次数 -->";
              videoHtml += '    <div class="videoDataLeft">';
              videoHtml +=
                '      <img class="videoDataImgLook" src="/Public/bibidd/images/look.png" alt="" />';
              videoHtml +=
                '      <div id="looks" class="videoText">' +
                data.views +
                "</div>";
              videoHtml += "    </div>";
              videoHtml += "    <!-- 点赞次数 -->";
              videoHtml += '    <div class="videoDataRgiht">';
              videoHtml +=
                '      <img class="videoDataImgZan" src="/Public/bibidd/images/zan.png" alt="" />';
              videoHtml +=
                '      <div class="videoText">' + data.thumbs_up + "</div>";
              videoHtml += "    </div>";
              videoHtml += "  </div>";
              videoHtml += "</div>";
            });
            setTimeout(() => {
              $(".video").append(videoHtml);
  
              $(".bottomLoadContent").hide();
  
              var loadingUrl = "/Public/bibidd/images/loading.png";
              $(".lazy").lazyload({
                effect: "show",
                placeholder: loadingUrl,
                failurelimit: 10,
                skip_invisible: false,
              });
              $(".videoContent").on("click", function () {
                let looks = $(this).find("#looks").eq(0).text();
                $(this).find("#looks").eq(0).text(Number(looks)+1);
                $(location).attr("href","bphotodetails.html?imgid=" +
                    allDataArray[$(this).index()].id +
                    "&fabulous=" +
                    allDataArray[$(this).index()].thumbs_up +
                    "&favorite=" +
                    allDataArray[$(this).index()].favorite
                );
              });
              ispage = true;
            }, 1000);
          
          } else {
            $(".bottomLoadContent").hide();
            $(".box").show();
            ispage = true;
          }
        }
      }
    });


  // 创建视频dom元素
  function createDomHtml(dataArray) {
    let videoHtml = "";
    $.each(dataArray, function (index, data) {
      videoHtml += '<div class="videoContent">';
      videoHtml +=
        '<div class="lazy videoPhoto" data-original="' +
        data.top_img +
        '"></div>';

      videoHtml += '  <div class="videoTitle">' + data.title + "</div>";
      videoHtml += '  <div class="videoData">';
      videoHtml += "    <!-- 观看次数 -->";
      videoHtml += '    <div class="videoDataLeft">';
      videoHtml +=
        '      <img class="videoDataImgLook" src="/Public/bibidd/images/look.png" alt="" />';
      videoHtml += '      <div id="looks" class="videoText">' + data.views + "</div>";
      videoHtml += "    </div>";
      videoHtml += "    <!-- 点赞次数 -->";
      videoHtml += '    <div class="videoDataRgiht">';
      videoHtml +=
        '      <img class="videoDataImgZan" src="/Public/bibidd/images/zan.png" alt="" />';
      videoHtml += '      <div class="videoText">' + data.thumbs_up + "</div>";
      videoHtml += "    </div>";
      videoHtml += "  </div>";
      videoHtml += "</div>";
    });
    $(".video").html(videoHtml);

    var loadingUrl = "/Public/bibidd/images/loading.png";
    $(".lazy").lazyload({
      effect: "show",
      placeholder: loadingUrl,
      failurelimit: 10,
      skip_invisible: false,
    });
    // 查看视频详情
    $(".videoContent").on("click", function () {
      let looks = $(this).find("#looks").eq(0).text();
      $(this).find("#looks").eq(0).text(Number(looks)+1);
      $(location).attr("href","bphotodetails.html?imgid=" +
          dataArray[$(this).index()].id +
          "&fabulous=" +
          dataArray[$(this).index()].thumbs_up +
          "&favorite=" +
          dataArray[$(this).index()].favorite
      );
    });
  }

  function clearScroll() {
    showVideoNum = 12;
    ispage = false;
    scrollT = 0;
    offsetT = 0;
    $(".bottomLoadContent").show();
    $(".box").hide();
  }

  $('.clearTextImg').on('click', function() {
    $('.searchInput').val('');
  })
});