add Infinite Scroll

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }

Columns-detail.html

@@ -16,9 +16,11 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
-    <!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
-    <link rel="stylesheet" type="text/css" href="css/slick.css" />
-    <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
+
+    <!-- Add the slick-theme.css if you want default styling -->
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+    <!-- Add the slick-theme.css if you want default styling -->
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
 
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <link rel="stylesheet" href="css/style.css">
@@ -1004,6 +1006,8 @@
             </div>
         </section>
 
+        
+
         <section class="article">
             <div class="container article--style">
                 <div class="container-width-column py-md-3">
@@ -1011,7 +1015,6 @@
                         <!-- <h1 class="article__title mt-4">烤漆玻璃、噴砂玻璃、強化玻璃…玻璃種類比你想得還多！選對類型節能、省電、隔音又美觀</h1>
                         <div class="small">2021-12-30｜ 人氣:49</div> -->
                     </div>
-
                     <div class="article__contexts article__contexts--longHeight active ColumnsContent" style="height:auto">
                         <!-- <p><img alt="幸福空間專欄" src="https://m.hhh.com.tw/upload/_hcolumn/content_20220125163555_0.jpg">
                         </p>
@@ -1249,16 +1252,14 @@
                         <div class="article__contexts__note">
                             <p>彙整編輯:Amy</p>
                             <p>圖文提供:918建材庫</p>
-                        </div> -->
+                        </div>
                         
-                    </div>
+                    </div> -->
                 </div>
             </div>
-            <section class="sec-07_Ads my-5">
-                <div class="container">
-                    <div class="sec-07__slider">
-    
-                    </div>
+            <section class="sec-07_Ads">
+                <div class="container py-5">
+                    <div class="sec-07__slider"></div>
                 </div>
             </section>
         </section>
@@ -1320,7 +1321,7 @@
             </div>
         </section>
 
-        <section id="search" class="likeSee mb-5">
+        <section id="search" class="likeSee">
             <div class="container">
                 <div class="row">
                     <div class="col-12 px-md-0">
@@ -1542,6 +1543,12 @@
                 </div>
             </div>
         </section>
+
+        <div class="d-flex justify-content-center py-3 py-md-5">
+            <div>
+                <svg class="loading-move " xmlns="http://www.w3.org/2000/svg" width="40" height="41.965" viewBox="0 0 40 41.965"><defs><style>.a{fill:#ee751b;}</style></defs><circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)"/><ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933" transform="translate(18.05 36.099)"/><ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)"/><circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)"/><ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)"/><circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)"/><path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z" transform="translate(1.403 11.424)"/><ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466" transform="translate(31.603 8.434)"/></svg>
+            </div>
+        </div>
         <!-- 
         <div class="container container-width-ad ad bg-ad px-0 py-5">
             <div class="row justify-content-center mx-0">
@@ -1590,9 +1597,6 @@
               <img src="images/gotop.webp" width="28" alt="">
             </div>
         </div>
-
-        
-
         <footer class="footer d-none d-md-block">
             <div class="container" style="margin:0 auto;">
                 <div class="row">
@@ -1682,8 +1686,6 @@
 
             </div>
         </footer>
-
-
     </div>
 
 
@@ -1696,10 +1698,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
     <script async defer src="js/index.js"></script>
-    <!-- <script async defer src="./goto.js"></script> -->
     <script async defer src="./columns.js"></script>
-
-    <!-- <script src="js/lazy-load.js" async></script> -->
 </body>
 
 </html>

columns.js

@@ -14,7 +14,8 @@ console.log(id);
 function get_data() {
     $.ajax({
         method: "GET",
-        url: `json/Columns-${id}.json`,
+        // url: `json/Columns-${id}.json`,
+        url: `https://m3.hhh.com.tw:18686/gencolumn?id=${id}&sort=new&page=1`,
         // url:`json/Columns.json`,
         dataType: "json",
     })
@@ -89,10 +90,6 @@ function get_data() {
             //         PopularColumns+='</div></div></div>'
 
             // }
-
-
-
-
             $('.article_info').html(article_info);
 
             $('.breadcrumb-title').html(breadcrumbTitle);
@@ -105,28 +102,32 @@ function get_data() {
 
             // $('.PopularColumns').html(PopularColumns);
 
-
-
-
-
         });
 }
 
 function renderSec07() {
+
     $.ajax({
         method: "GET",
         // url: `json/bannerAds-${id}.json`,
         url: `json/bannerAds.json`,
         dataType: "json",
     })
+
         .done(function (msg) {
+
             console.log(msg);
+
             let str = '';
+
             for (let i = 0; i < msg[0].data.length; i++) {
-                // console.log(msg[i])
+  
                 str += `<div class="sec-07__slider-${i + 1} slide-item" onclick="window.open('${msg[0].data[i].link}');" data-bg="${msg[0].data[i].imgUrl}"><img class="img-fluid" src="${msg[0].data[i].imgUrl}"></div>`
+
             }
+
             $(`.sec-07__slider`).html(str);
+
             $(".sec-07__slider").slick({
                 dots: false,
                 autoplay: true,
@@ -139,41 +140,97 @@ function renderSec07() {
                 prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
                 nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
             });
+
         });
 
 }
+
 get_data();
-renderSec07();
 
+// renderSec07();
+
+let filter;
 
 $(".views").click(function () {
+    console.log(1);
+    filter = "hot";
     get_views_data();
 });
 
 $(".recently").click(function () {
-    get_data();
+    console.log(2);
+    filter = "new";
+    get_views_data();
 });
 
+
+
 function get_views_data() {
     $.ajax({
         method: "GET",
-        url: `json/Columns-${id}.json`,
+        url:`https://m3.hhh.com.tw:18686/gencolumn?id=${id}&sort=${filter}&page=1`,
+        // url: `json/Columns-${id}.json`,
         // url:`json/cases.json`,
         dataType: "json",
     })
         .done(function (msg) {
 
             console.log(msg);
+            // msg[0].OtherColumns.sort(function (a, b) {
+            //     return a['Views'] > b['Views'] ? -1 : 1;
+            // });
+
+            console.log(msg[0].OtherColumns);
             let OtherColumns = "";
 
-            msg[0].OtherColumns.sort(function (a, b) {
-                return a['Views'] > b['Views'] ? -1 : 1;
-            });
+            for (let i = 0; i < msg[0].OtherColumns.length; i++) {
+                OtherColumns +=
+                    '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
+                    <a target="_blank" href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"> <img src="' + msg[0].OtherColumns[i].ColumnsCoverImg + '" alt="">\
+                <div class="cardList__items__content">\
+                    <a href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"" target="_blank">\
+                        <div class="cardList__items--title cardList__items--ellipse">\
+                            '+ msg[0].OtherColumns[i].Columnstitle + '\
+                        </div>\
+                    </a>'
+                OtherColumns += '<p>'
+                for (k = 0; k < msg[0].OtherColumns[i].ColumnsTag.length; k++) {
+                    OtherColumns += '\
+                        <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+ msg[0].OtherColumns[i].ColumnsTag[k].tag + '-keyword/all-columntypea/" arget="_blank">' + msg[0].OtherColumns[i].ColumnsTag[k].Tag + '</a>'
+                }
+                OtherColumns += '</p>'
+                OtherColumns += '</div></div></div>'
+
+            }
 
+            $('.OtherColumns').html(OtherColumns);
 
+        });
+
+};
 
-            console.log(msg[0].OtherColumns);
 
+if ($(".views").hasClass("active")) {
+    filter = "hot";
+    // alert('1');
+} else {
+    filter = "new";
+    // alert('2');
+}
+
+
+function scroll_bottom_load_data(page) {
+
+    $.ajax({
+        method: "GET",
+        // url: `json/cases-${id}.json`,
+        // url:`json/cases.json`,
+        url: `https://m3.hhh.com.tw:18686/gencolumn?id=${id}&sort=${filter}&page=${page}`,
+
+        dataType: "json",
+    })
+        .done(function (msg) {
+            let OtherColumns = "";
             for (let i = 0; i < msg[0].OtherColumns.length; i++) {
                 OtherColumns +=
                     '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
@@ -194,47 +251,75 @@ function get_views_data() {
 
             }
 
-            $('.OtherColumns').html(OtherColumns);
+            // $('.OtherColumns').html(OtherColumns);
+            $('.OtherColumns').append(OtherColumns);
+
 
         });
 
-};
+}
 
 
+$(window).scroll(function () {
+    var scrollTop = $(this).scrollTop();
+    var scrollHeight = $('body').prop("scrollHeight");
+    var clientHeight = document.documentElement.clientHeight;
+    if (jQuery(window).width() < 767) {
+       
+        //一樣 var scrollHeight2 = document.documentElement.scrollHeight;
+   
 
-// $(document).ready(function () {
-//     var h = $('#hhh-cases').height();
-//     var sh = $('#hhh-cases').scrollHeight;
-//     var st = $('#hhh-cases').scrollTop;
+        if (scrollTop + clientHeight >= scrollHeight - 5) {
+            loadMore_m();
+            console.log(page);
+        }
+    } else {
 
-//     console.log(h);
-//     console.log(sh);
-//     console.log(st);
+        if (scrollTop + clientHeight >= scrollHeight - 5) {
+            loadMore();
+            console.log(page);
 
+        }
+    }
 
-//     $('#hhh-cases').scroll(function () {
-//         var h = $(this).height();
-//         var st = $(this).scrollTop;
 
-//         console.log(h);
-//         console.log(sh);
-//         console.log(st);
-//         if(h+st>= sh){
-//             alert('底部了')
-//         }
+})
 
-//     });
-// });
 
-$(document).ready(function() {
-    $(window).scroll(function() {
-  
-      if ($(document).scrollTop()<=0){
-        // alert("滾動條已經到達頂部爲0");
-      }
-  
-      if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
-        // alert("滾動條已經到達底部爲" + $(document).scrollTop());
-      }
-    });
-  });
+var page = 1;
+function loadMore() {
+
+    setTimeout(function () {
+        page++;
+        // console.log(page);
+        scroll_bottom_load_data(page);
+
+        return page
+    }, 500);
+}
+
+
+function loadMore_m() {
+
+    // console.log(page);
+
+    setTimeout(function () {
+        page++;
+        // console.log(page);
+        scroll_bottom_load_data(page);
+
+        return page
+    }, 500);
+}
+// function loadMore_m() {
+
+//     // console.log(page);
+
+//     setTimeout(function () {
+//         page++;
+//         // console.log(page);
+//         scroll_bottom_load_data(page);
+
+//         return page
+//     }, 500);
+// }

css/style.css

@@ -2670,6 +2670,43 @@ body {
   text-decoration: none;
 }
 
+#hhh-cases .loading-move {
+  -webkit-animation-name: move;
+          animation-name: move;
+  -webkit-animation-duration: 2s;
+          animation-duration: 2s;
+  -webkit-animation-delay: 0;
+          animation-delay: 0;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-direction: normal;
+          animation-direction: normal;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}
+
+@-webkit-keyframes move {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@keyframes move {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
 #hhh-cases .info-area-title-desktop {
   font-size: 18px;
   font-weight: bold;

css/style.scss

@@ -2192,6 +2192,24 @@ body {
 
    
    
+}
+
+.loading-move {
+    animation-name: move;
+    animation-duration: 2s;
+    animation-delay: 0;
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+    animation-timing-function: linear;
+}
+
+@keyframes move {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 .info-area-title-desktop {
     font-size: 18px;

goto.js

@@ -1,22 +1,6 @@
 
 // $(".popular").hide();
-console.log(1);
-$(document).ready(function () {
-console.log(1);
-    $('#hhh-cases').scroll(function () {
-        var h = $(this).height();
-        var sh = $(this).scrollHeight;
-        var st = $(this).scrollTop;
-
-        console.log(h);
-        console.log(sh);
-        console.log(st);
-        if(h+st>= sh){
-            alert('底部了')
-        }
 
-    });
-});
 
 $(document).on("click", ".article__readMore", function (event) {
     $('.article__contexts_cases').css('height', 'auto');
@@ -36,9 +20,28 @@ $(document).on("click", ".likeSee__state__filter--item", function (event) {
 
 
 const urlParams = new URLSearchParams(window.location.search);
+
 let id = urlParams.get('cid');
+
 console.log(id);
 
+
+var datahref = String(window.location.href);
+var datahref2 = "http://127.0.0.1:5501/cases.html/";
+
+
+console.log(datahref2);
+
+let posit = datahref2.indexOf("d");
+
+if (posit == -1) {
+    console.log('沒有d');
+
+} else {
+    console.log('有d');
+}
+
+
 function get_data() {
     // var desid2=String(desid);
     // console.log(desid2);
@@ -46,12 +49,13 @@ function get_data() {
     // $("#version").html(desid);
     $.ajax({
         method: "GET",
-        url: `json/cases-${id}.json`,
+        // url: `json/cases-${id}.json`,
         // url:`json/cases.json`,
+        url: `https://m3.hhh.com.tw:18686/gencase?id=${id}&sort=new&page=1`,
         dataType: "json",
     })
         .done(function (msg) {
-            // console.log(msg);
+            console.log(msg);
             let designersinfo = "";
             let CaseInfo = "";
             let CaseInfo_mb = "";
@@ -65,14 +69,19 @@ function get_data() {
             let article__contexts = "";
             let CaseCoverImg = "";
 
-
-
-
             for (let i = 0; i < msg.length; i++) {
 
                 CaseCoverImg = `
-                <img class="img-fluid" src="${msg[i].CaseCoverImg}" alt="">
-                
+                <div class="CaseCoverImg">
+                    <a style="text-decoration: none;" href="https://hhh.com.tw/photos/detail/${id}/" target="_blank">
+                        <img class="img-fluid" src="${msg[i].CaseCoverImg}" alt="">
+                    </a>
+                </div>
+                <div class="morePhotoTip">
+                    <a style="text-decoration: none; color:#fff;" href="https://hhh.com.tw/photos/detail/${id}/" target="_blank">
+                        <i class="fa fa-clone case-img-quantity" aria-hidden="true"><span class="ms-2 case-img-quantity">${msg[i].CaseImgAmount}</span></i> 
+                    </a>
+                </div>
                 `
                 designersinfo = `
                 <div class="container container-width-column px-md-0">
@@ -264,24 +273,24 @@ function get_data() {
                             </div>
                         </div>`
 
-                for (var k = 0; k<msg[i].DesignerProfile.length; k++) {
+                for (var k = 0; k < msg[i].StyleProfile.length; k++) {
 
                     CaseNews +=
                         '<div class="col-6 col-md-4 ps-0"\
                             <div class="vue-waterfall-slot">\
-                             <div class="card CaseNews-Card">\
-                                 <a href="'+ msg[i].DesignerProfile[k].ProfileLink + '">\
+                             <div class="card">\
+                                 <a href="'+ msg[i].StyleProfile[k].ProfileLink + '">\
                                     <img class="img-fluid"\
-                                    src="'+ msg[i].DesignerProfile[k].ProfileImg + '"\
+                                    src="'+ msg[i].StyleProfile[k].ProfileImg + '"\
                                     alt="幸福空間個案圖" class="card-img-top">\
                                 </a>\
                             </div>'
                     CaseNews += '<div class="card-body">'
-                    for (var z = 0; z < msg[i].DesignerProfile[k].ProfileTag.length; z++) {
+                    for (var z = 0; z < msg[i].StyleProfile[k].ProfileTag.length; z++) {
                         // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
                         CaseNews += '\
-                                <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].DesignerProfile[k].ProfileTag[z].Tag + '-keyword/">\
-                                '+ msg[i].DesignerProfile[k].ProfileTag[z].Tag + '\
+                                <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].StyleProfile[k].ProfileTag[z].Tag + '-keyword/">\
+                                '+ msg[i].StyleProfile[k].ProfileTag[z].Tag + '\
                                 </a>\
                                 ';
                     }
@@ -289,6 +298,30 @@ function get_data() {
                 };
 
 
+                // 備份寫法
+                // for (var k = 0; k<msg[i].DesignerProfile.length; k++) {
+
+                //     CaseNews +=
+                //         '<div class="col-6 col-md-4 ps-0"\
+                //             <div class="vue-waterfall-slot">\
+                //              <div class="card CaseNews-Card">\
+                //                  <a href="'+ msg[i].DesignerProfile[k].ProfileLink + '">\
+                //                     <img class="img-fluid"\
+                //                     src="'+ msg[i].DesignerProfile[k].ProfileImg + '"\
+                //                     alt="幸福空間個案圖" class="card-img-top">\
+                //                 </a>\
+                //             </div>'
+                //     CaseNews += '<div class="card-body">'
+                //     for (var z = 0; z < msg[i].DesignerProfile[k].ProfileTag.length; z++) {
+                //         // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
+                //         CaseNews += '\
+                //                 <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].DesignerProfile[k].ProfileTag[z].Tag + '-keyword/">\
+                //                 '+ msg[i].DesignerProfile[k].ProfileTag[z].Tag + '\
+                //                 </a>\
+                //                 ';
+                //     }
+                //     CaseNews += '</div></div></div></div>'
+                // };   
 
 
                 // for (var x = 0; x < msg[i].ProfilePopularity.length; x++) {
@@ -310,218 +343,218 @@ function get_data() {
                 //     CasePopular += '</div></div>'
                 // };
                 // 個案細節
-                CaseDetail += '<div class="row px-0 mx-0">'
-                CaseDetail += '<div class="col-md-8 case-slick-box" style="overflow-y: hidden;"><button type="button" class="btn-close close-window d-block d-md-none mt-3 btn-close-white" style="margin-left:auto"></button><div class="img-wrapper-desktopp"><div class="CaseDetail-slick">'
-                // 輪播圖
-                for (let j = 0; j < msg[i].CaseDetail.length; j++) {
-                    CaseDetail +=
-                        '<div style="width: 960px;" class="CaseSlider" data-info="' + j + '"><div class="img-wrapper-desktop"><div class="swiper-zoom-container-desktop"><img src="' + msg[i].CaseDetail[j].CaseDetailImg + '" alt=""></div></div></div>'
 
-                }
+                // CaseDetail += '<div class="row px-0 mx-0">'
+                // CaseDetail += '<div class="col-md-8 case-slick-box" style="overflow-y: hidden;"><button type="button" class="btn-close close-window d-block d-md-none mt-3 btn-close-white" style="margin-left:auto"></button><div class="img-wrapper-desktopp"><div class="CaseDetail-slick">'
+                // // 輪播圖
+                // for (let j = 0; j < msg[i].CaseDetail.length; j++) {
+                //     CaseDetail +=
+                //         '<div style="width: 960px;" class="CaseSlider" data-info="' + j + '"><div class="img-wrapper-desktop"><div class="swiper-zoom-container-desktop"><img src="' + msg[i].CaseDetail[j].CaseDetailImg + '" alt=""></div></div></div>'
+
+                // }
+
+                // CaseDetail += '</div></div></div>'
+
+                // CaseDetail +=
+                //     '<div class="col-md-4" style="background-color:#fff;">\
+                //     <div class="modal-header border-0 display-pc close-window">\
+                //         <button type="button" class="btn-close"></button>\
+                //     </div>\
+                //     <div class="d-flex justify-content-start align-items-center pt-5">\
+                //     <a href="">\
+                //     <div class="contact-section-avatar me-2">\
+                //         <img class="img-fluid" src="'+ msg[i].ContactDesignerImg + '" alt="">\
+                //     </div>\
+                // </a>\
+                // <div class="ms-2" style="width: 100%;">\
+                //     <a href="" class="contact-section-company">\
+                //         <div>\
+                //         '+ msg[i].CaseCompany + '\
+                //         </div>\
+                //     </a>\
+                //     <div style="display: flex;" class="contact-section-detail-box mt-3">\
+                //         <div class="contact-section-detail-lf">\
+                //             <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
+                //         </div>\
+                //         <div class="contact-section-detail-rt">\
+                //             <div><a href="tel:'+ msg[i].ContactFreeTel + '">免付費 ' + msg[i].ContactFreeTel + '</a></div>\
+                //         </div>\
+                //     </div>\
+                //     </div>\
+                // </div>\
+                // '
+                // CaseDetail +=
+                //     '<div class="info-area-title-desktop">\
+                //     <a href="'+ msg[i].CasePageLink + '" target="_blank">\
+                //     '+ msg[i].Casetitle + '\
+                //     </a>\
+                // </div>\
+                // <div class="divider"></div>\
+                // '
+                // CaseDetail +=
+                //     '<div class="info-area-other-case-desktop py-3">\
+                //     <div class="ml-1">該個案的其他圖片(<span id="index" class="slickNumber">1</span>/'+ msg[i].CaseDetail.length + ')</div>\
+                //     <div class="other-case-desktop-items d-flex flex-wrap">\
+                // '
+                // for (let j = 0; j < msg[i].CaseDetail.length; j++) {
+
+                //     CaseDetail +=
+                //         '<div id="img-0" data-thisid=(' + j + ') class="w-20 m-1 p-1 img_all CaseOtherImg" style="cursor: pointer;" onclick="slickGoTo(' + j + ')">\
+                //                 <img src=" '+ msg[i].CaseDetail[j].CaseDetailImg + '" width="70" height="70" alt="該個案的其他圖片">\
+                //         </div>'
 
-                CaseDetail += '</div></div></div>'
-
-                CaseDetail +=
-                    '<div class="col-md-4" style="background-color:#fff;">\
-                    <div class="modal-header border-0 display-pc close-window">\
-                        <button type="button" class="btn-close"></button>\
-                    </div>\
-                    <div class="d-flex justify-content-start align-items-center pt-5">\
-                    <a href="">\
-                    <div class="contact-section-avatar me-2">\
-                        <img class="img-fluid" src="'+ msg[i].ContactDesignerImg + '" alt="">\
-                    </div>\
-                </a>\
-                <div class="ms-2" style="width: 100%;">\
-                    <a href="" class="contact-section-company">\
-                        <div>\
-                        '+ msg[i].CaseCompany + '\
-                        </div>\
-                    </a>\
-                    <div style="display: flex;" class="contact-section-detail-box mt-3">\
-                        <div class="contact-section-detail-lf">\
-                            <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
-                        </div>\
-                        <div class="contact-section-detail-rt">\
-                            <div><a href="tel:'+ msg[i].ContactFreeTel + '">免付費 ' + msg[i].ContactFreeTel + '</a></div>\
-                        </div>\
-                    </div>\
-                    </div>\
-                </div>\
-                '
-                CaseDetail +=
-                    '<div class="info-area-title-desktop">\
-                    <a href="'+ msg[i].CasePageLink + '" target="_blank">\
-                    '+ msg[i].Casetitle + '\
-                    </a>\
-                </div>\
-                <div class="divider"></div>\
-                '
-                CaseDetail +=
-                    '<div class="info-area-other-case-desktop py-3">\
-                    <div class="ml-1">該個案的其他圖片(<span id="index" class="slickNumber">1</span>/'+ msg[i].CaseDetail.length + ')</div>\
-                    <div class="other-case-desktop-items d-flex flex-wrap">\
-                '
-                for (let j = 0; j < msg[i].CaseDetail.length; j++) {
-
-                    CaseDetail +=
-                        '<div id="img-0" data-thisid=(' + j + ') class="w-20 m-1 p-1 img_all CaseOtherImg" style="cursor: pointer;" onclick="slickGoTo(' + j + ')">\
-                                <img src=" '+ msg[i].CaseDetail[j].CaseDetailImg + '" width="70" height="70" alt="該個案的其他圖片">\
-                        </div>'
-
-                };
+                // };
 
 
-                CaseDetail += '</div></div>';
+                // CaseDetail += '</div></div>';
 
-                CaseDetail += '<div class="divider"></div>';
+                // CaseDetail += '<div class="divider"></div>';
 
-                CaseDetail +=
-                    '<div class="info-area-same-case-desktop py-3">\
-                    <div class="ml-1"><span>工業風</span> 其他作品</div>\
-                    <div class="same-case-desktop-items d-flex flex-wrap">\
-                '
-                for (let j = 0; j < msg[i].OtherStylePortfolio.length; j++) {
-                    CaseDetail +=
-                        '<div class="w-20 m-1 p-1 ">\
-                        <a href="'+ msg[i].OtherStylePortfolio[j].PortfoliolLink + '">\
-                        <img src="'+ msg[i].OtherStylePortfolio[j].PortfoliolImg + '" width="70" height="70" alt="' + msg[i].OtherStylePortfolio.PortfoliolImgAlt + '">\
-                        </a>\
-                    </div>'
-                };
-                CaseDetail += '</div></div>';
-                CaseDetail += '<div class="divider"></div>';
-
-                CaseDetail +=
-                    '<div class="info-area-data-desktop py-3">\
-                <div class="ml-2">CASE DATA</div>\
-                <div class="data-table-desktop ml-2">\
-                    <div class="data-table-items d-flex">\
-                        <div class="data-table-lf">\
-                            <div>裝潢費用:</div>\
-                        </div>\
-                        <div class="data-table-rt">\
-                            <div>'+ msg[i].CaseProject + '</div>\
-                        </div>\
-                    </div>\
-                    <div class="data-table-items d-flex">\
-                        <div class="data-table-lf">\
-                            <div>居住成員:</div>\
-                        </div>\
-                        <div class="data-table-rt">\
-                            <div>'+ msg[i].CaseDataMember + '</div>\
-                        </div>\
-                    </div>\
-                    <div class="data-table-items d-flex">\
-                        <div class="data-table-lf">\
-                            <div>設計風格:</div>\
-                        </div>\
-                        <div class="data-table-rt">\
-                            <div>'+ msg[i].CaseStyle + '</div>\
-                        </div>\
-                    </div>\
-                    <div class="data-table-items d-flex">\
-                        <div class="data-table-lf">\
-                            <div>房屋類型:</div>\
-                        </div>\
-                        <div class="data-table-rt">\
-                            <div>'+ msg[i].CaseDataType + '</div>\
-                        </div>\
-                    </div>\
-                    <div class="data-table-items d-flex">\
-                        <div class="data-table-lf">\
-                            <div>房屋坪數:</div>\
-                        </div>\
-                        <div class="data-table-rt">\
-                            <div>'+ msg[i].CaseSize + '</div>\
-                        </div>\
-                    </div>\
-                    <div class="data-table-items d-flex">\
-                        <div class="data-table-lf">\
-                            <div>房屋狀況:</div>\
-                        </div>\
-                        <div class="data-table-rt">\
-                            <div>'+ msg[i].CaseDataSituation + '</div>\
-                        </div>\
-                    </div>\
-                    <div class="data-table-items d-flex">\
-                        <div class="data-table-lf">\
-                            <div>圖片提供:</div>\
-                        </div>\
-                        <div class="data-table-rt">\
-                            <div>'+ msg[i].CaseCompany + '</div>\
-                        </div>\
-                    </div>\
-                    <div class="data-table-items d-flex">\
-                        <div class="data-table-lf">\
-                            <div>空間格局:</div>\
-                        </div>\
-                        <div class="data-table-rt">\
-                            <div>'+ msg[i].CaseDataSpace + '</div>\
-                        </div>\
-                    </div>\
-                    <div class="data-table-items d-flex">\
-                        <div class="data-table-lf">\
-                            <div>主要建材:</div>\
-                        </div>\
-                        <div class="data-table-rt">\
-                            <div>'+ msg[i].CaseDataMaterial + '</div>\
-                        </div>\
-                    </div>\
-                </div>\
-                </div>';
-
-                CaseDetail += '<div class="divider"></div>';
-                CaseDetail +=
-                    '<div class="info-area-contact-desktop py-3 mb-2">\
-                    <div class="ml-2">聯絡資訊 Info</div>\
-                        <div class="contact-section-desktop ml-2 mt-2">\
-                            <div class="contact-section-detail-desktop mt-3">\
-                                <div class="d-flex">\
-                                    <div class="contact-section-detail-lf">\
-                                    <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
-                                </div>\
-                            <div class="contact-section-detail-rt">\
-                                    <div>\
-                                        <a href="tel:'+ msg[i].CaseCompanyTel + '">' + msg[i].CaseCompanyTel + '</a>\
-                                    </div>\
-                                </div>\
-                            </div>\
-                            <div class="d-flex">\
-                                <div class="contact-section-detail-lf">\
-                                    <div><i class="fas fa-map-marker-alt"></i></div>\
-                                </div>\
-                                <div class="contact-section-detail-rt">\
-                                    <div><a href="'+ msg[i].CaseCompanyMap + '" target="_blank">' + msg[i].CaseCompanyAddress + '</a></div>\
-                                </div>\
-                            </div>\
-                            <div class="d-flex">\
-                                    <div class="contact-section-detail-lf">\
-                                        <div><i class="far fa-envelope"></i></div>\
-                                    </div>\
-                                    <div class="contact-section-detail-rt">\
-                                        <div><a href="mailto:'+ msg[i].CaseCompanyEmail + '">' + msg[i].CaseCompanyEmail + '</a></div>\
-                                    </div>\
-                            </div>\
-                            <div class="d-flex">\
-                                <div class="contact-section-detail-lf">\
-                                    <div><i aria-hidden="true" class="fa fa-home"></i></div>\
-                                </div>\
-                                <div class="contact-section-detail-rt">\
-                                    <div><a href="'+ msg[i].CaseCompanyWeb + '"\
-                                    target="_blank">'+ msg[i].CaseCompanyWeb + '</a></div>\
-                                </div>\
-                            </div>\
-                        </div>\
-                    </div>\
-                </div>'
-                CaseDetail += '</div>'
+                // CaseDetail +=
+                //     '<div class="info-area-same-case-desktop py-3">\
+                //     <div class="ml-1"><span>工業風</span> 其他作品</div>\
+                //     <div class="same-case-desktop-items d-flex flex-wrap">\
+                // '
+                // for (let j = 0; j < msg[i].OtherStylePortfolio.length; j++) {
+                //     CaseDetail +=
+                //         '<div class="w-20 m-1 p-1 ">\
+                //         <a href="'+ msg[i].OtherStylePortfolio[j].PortfoliolLink + '">\
+                //         <img src="'+ msg[i].OtherStylePortfolio[j].PortfoliolImg + '" width="70" height="70" alt="' + msg[i].OtherStylePortfolio.PortfoliolImgAlt + '">\
+                //         </a>\
+                //     </div>'
+                // };
+                // CaseDetail += '</div></div>';
+                // CaseDetail += '<div class="divider"></div>';
+
+                // CaseDetail +=
+                //     '<div class="info-area-data-desktop py-3">\
+                // <div class="ml-2">CASE DATA</div>\
+                // <div class="data-table-desktop ml-2">\
+                //     <div class="data-table-items d-flex">\
+                //         <div class="data-table-lf">\
+                //             <div>裝潢費用:</div>\
+                //         </div>\
+                //         <div class="data-table-rt">\
+                //             <div>'+ msg[i].CaseProject + '</div>\
+                //         </div>\
+                //     </div>\
+                //     <div class="data-table-items d-flex">\
+                //         <div class="data-table-lf">\
+                //             <div>居住成員:</div>\
+                //         </div>\
+                //         <div class="data-table-rt">\
+                //             <div>'+ msg[i].CaseDataMember + '</div>\
+                //         </div>\
+                //     </div>\
+                //     <div class="data-table-items d-flex">\
+                //         <div class="data-table-lf">\
+                //             <div>設計風格:</div>\
+                //         </div>\
+                //         <div class="data-table-rt">\
+                //             <div>'+ msg[i].CaseStyle + '</div>\
+                //         </div>\
+                //     </div>\
+                //     <div class="data-table-items d-flex">\
+                //         <div class="data-table-lf">\
+                //             <div>房屋類型:</div>\
+                //         </div>\
+                //         <div class="data-table-rt">\
+                //             <div>'+ msg[i].CaseDataType + '</div>\
+                //         </div>\
+                //     </div>\
+                //     <div class="data-table-items d-flex">\
+                //         <div class="data-table-lf">\
+                //             <div>房屋坪數:</div>\
+                //         </div>\
+                //         <div class="data-table-rt">\
+                //             <div>'+ msg[i].CaseSize + '</div>\
+                //         </div>\
+                //     </div>\
+                //     <div class="data-table-items d-flex">\
+                //         <div class="data-table-lf">\
+                //             <div>房屋狀況:</div>\
+                //         </div>\
+                //         <div class="data-table-rt">\
+                //             <div>'+ msg[i].CaseDataSituation + '</div>\
+                //         </div>\
+                //     </div>\
+                //     <div class="data-table-items d-flex">\
+                //         <div class="data-table-lf">\
+                //             <div>圖片提供:</div>\
+                //         </div>\
+                //         <div class="data-table-rt">\
+                //             <div>'+ msg[i].CaseCompany + '</div>\
+                //         </div>\
+                //     </div>\
+                //     <div class="data-table-items d-flex">\
+                //         <div class="data-table-lf">\
+                //             <div>空間格局:</div>\
+                //         </div>\
+                //         <div class="data-table-rt">\
+                //             <div>'+ msg[i].CaseDataSpace + '</div>\
+                //         </div>\
+                //     </div>\
+                //     <div class="data-table-items d-flex">\
+                //         <div class="data-table-lf">\
+                //             <div>主要建材:</div>\
+                //         </div>\
+                //         <div class="data-table-rt">\
+                //             <div>'+ msg[i].CaseDataMaterial + '</div>\
+                //         </div>\
+                //     </div>\
+                // </div>\
+                // </div>';
+
+                // CaseDetail += '<div class="divider"></div>';
+                // CaseDetail +=
+                //     '<div class="info-area-contact-desktop py-3 mb-2">\
+                //     <div class="ml-2">聯絡資訊 Info</div>\
+                //         <div class="contact-section-desktop ml-2 mt-2">\
+                //             <div class="contact-section-detail-desktop mt-3">\
+                //                 <div class="d-flex">\
+                //                     <div class="contact-section-detail-lf">\
+                //                     <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
+                //                 </div>\
+                //             <div class="contact-section-detail-rt">\
+                //                     <div>\
+                //                         <a href="tel:'+ msg[i].CaseCompanyTel + '">' + msg[i].CaseCompanyTel + '</a>\
+                //                     </div>\
+                //                 </div>\
+                //             </div>\
+                //             <div class="d-flex">\
+                //                 <div class="contact-section-detail-lf">\
+                //                     <div><i class="fas fa-map-marker-alt"></i></div>\
+                //                 </div>\
+                //                 <div class="contact-section-detail-rt">\
+                //                     <div><a href="'+ msg[i].CaseCompanyMap + '" target="_blank">' + msg[i].CaseCompanyAddress + '</a></div>\
+                //                 </div>\
+                //             </div>\
+                //             <div class="d-flex">\
+                //                     <div class="contact-section-detail-lf">\
+                //                         <div><i class="far fa-envelope"></i></div>\
+                //                     </div>\
+                //                     <div class="contact-section-detail-rt">\
+                //                         <div><a href="mailto:'+ msg[i].CaseCompanyEmail + '">' + msg[i].CaseCompanyEmail + '</a></div>\
+                //                     </div>\
+                //             </div>\
+                //             <div class="d-flex">\
+                //                 <div class="contact-section-detail-lf">\
+                //                     <div><i aria-hidden="true" class="fa fa-home"></i></div>\
+                //                 </div>\
+                //                 <div class="contact-section-detail-rt">\
+                //                     <div><a href="'+ msg[i].CaseCompanyWeb + '"\
+                //                     target="_blank">'+ msg[i].CaseCompanyWeb + '</a></div>\
+                //                 </div>\
+                //             </div>\
+                //         </div>\
+                //     </div>\
+                // </div>'
+                // CaseDetail += '</div>'
 
                 CasePageTitle += '' + msg[i].Casetitle + ''
 
-                CaseImgQuantity += '<span class="ms-2 case-img-quantity">' + msg[i].CaseDetail.length + '</span>'
             }
-            $('.CaseCoverImg').html(CaseCoverImg);
+            $('.CaseCover_Box').html(CaseCoverImg);
 
             $('.article').html(designersinfo);
             $('.CaseInfo').html(CaseInfo);
@@ -532,30 +565,30 @@ function get_data() {
             $('.caseData-PC-right').html(CaseData2);
             $('.CaseNews-Card').html(CaseNews);
             // $('.Case-popular').html(CasePopular);
-            $('.CaseModel').html(CaseDetail);
+            // $('.CaseModel').html(CaseDetail);
             $('#case-page-title').html(CasePageTitle);
-            $('.case-img-quantity').html(CaseImgQuantity);
+
             $('.article__contexts-box').html(article__contexts);
 
 
 
-            $('.CaseDetail-slick').slick({
-                slidesToShow: 1, //預設 1 幻燈片顯示幾張
-                slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
-                arrows: true, // 預設 true 左右箭頭是否顯示
-                prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white; transform: translateY(-10px);"></i></button>',
-                nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
-            });
+            // $('.CaseDetail-slick').slick({
+            //     slidesToShow: 1, //預設 1 幻燈片顯示幾張
+            //     slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
+            //     arrows: true, // 預設 true 左右箭頭是否顯示
+            //     prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white; transform: translateY(-10px);"></i></button>',
+            //     nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
+            // });
 
-            var activeimg = $(".slick-active img")[0];
+            // var activeimg = $(".slick-active img")[0];
 
-            console.log(activeimg);
+            // console.log(activeimg);
 
-            var imgwidth = activeimg.width;
+            // var imgwidth = activeimg.width;
 
-            var imgheight = activeimg.height;
+            // var imgheight = activeimg.height;
 
-            console.log(imgwidth);
+            // console.log(imgwidth);
 
 
             // if(imgwidth < 1000 && imgwidth >imgheight)
@@ -564,9 +597,9 @@ function get_data() {
             //     activeimg.parentNode.classList.add('swiper-zoom-container-sm-desktop');
             // }
 
-            if (imgwidth < imgheight) {
-                activeimg.style.width = 'auto';
-            }
+            // if (imgwidth < imgheight) {
+            //     activeimg.style.width = 'auto';
+            // }
 
 
 
@@ -577,98 +610,104 @@ get_data();
 
 $('.morePhotoTip > a').attr('href', `./casedetail.html?cid=${id}`);
 
-function slickGoTo(key) {
+// function slickGoTo(key) {
 
-    let slickNumber = "";
-    $('.CaseDetail-slick').slick('slickGoTo', key);
+//     let slickNumber = "";
+//     $('.CaseDetail-slick').slick('slickGoTo', key);
 
-    let slickNo = key + 1;
-    console.log(slickNo);
+//     let slickNo = key + 1;
+//     console.log(slickNo);
 
-    slickNumber += '' + slickNo + ''
+//     slickNumber += '' + slickNo + ''
 
-    $('.slickNumber').html(slickNumber);
+//     $('.slickNumber').html(slickNumber);
 
-}
+// }
 
 
-$(document).on("click", ".slick-prev", function (event) {
-    let slickNumbertest = '';
-    console.log(desid - 1);
+// $(document).on("click", ".slick-prev", function (event) {
+//     let slickNumbertest = '';
+//     console.log(desid - 1);
 
-    let slickNumber1 = desid + 1;
+//     let slickNumber1 = desid + 1;
 
-    slickNumbertest += '' + slickNumber1 + ''
+//     slickNumbertest += '' + slickNumber1 + ''
 
-    $('.slickNumber').html(slickNumbertest);
+//     $('.slickNumber').html(slickNumbertest);
 
 
-});
-
+// });
 
-$(document).on("click", ".slick-next", function (event) {
-    var desid = $(".slick-active").data("info");
 
-    let slickNumbertest = '';
-    console.log(desid + 1);
+// $(document).on("click", ".slick-next", function (event) {
+//     var desid = $(".slick-active").data("info");
 
-    let slickNumber1 = desid + 1;
+//     let slickNumbertest = '';
+//     console.log(desid + 1);
 
-    slickNumbertest += '' + slickNumber1 + ''
+//     let slickNumber1 = desid + 1;
 
-    $('.slickNumber').html(slickNumbertest);
+//     slickNumbertest += '' + slickNumber1 + ''
 
-});
+//     $('.slickNumber').html(slickNumbertest);
+// });
 
-$(document).on("click", ".close-window", function (event) {
-    window.close();
-});
+// $(document).on("click", ".close-window", function (event) {
+//     window.close();
+// });
 
+let filter;
 
-$( ".views" ).click(function() {
+$(".views").click(function () {
+    filter = "hot";
     get_views_data();
+
 });
 
-$( ".recently" ).click(function() {
-    get_data();
+$(".recently").click(function () {
+    filter = "new";
+    get_views_data();
+
 });
 
 function get_views_data() {
+
     $.ajax({
         method: "GET",
-        url: `json/cases-${id}.json`,
+        // url: `json/cases-${id}.json`,
         // url:`json/cases.json`,
+        url: `https://m3.hhh.com.tw:18686/gencase?id=${id}&sort=${filter}&page=1`,
         dataType: "json",
     })
-        .done(function (msg) {
 
-            console.log(msg);
+        .done(function (msg) {
             let CaseNews = "";
-            msg[0].DesignerProfile.sort(function (a,b){
-                return a['Views'] > b['Views']? -1:1;
-            });
-
-
+            // if (filter == "hot") {
+            //     msg[0].StyleProfile.sort(function (a, b) {
+            //         return a['Views'] > b['Views'] ? -1 : 1;
+            //     });
+            // }
+            console.log(msg);
 
-            console.log(msg[0].DesignerProfile);
+            console.log(msg[0].StyleProfile);
 
-            for (var k = 0; k < msg[0].DesignerProfile.length; k++) {
+            for (var k = 0; k < msg[0].StyleProfile.length; k++) {
                 CaseNews +=
-                    '<div class="col-6 col-md-4 ps-0" >\
+                    '<div class="col-6 col-md-4 ps-0"\
                         <div class="vue-waterfall-slot">\
                          <div class="card CaseNews-Card">\
-                             <a href="'+ msg[0].DesignerProfile[k].ProfileLink + '">\
+                             <a href="'+ msg[0].StyleProfile[k].ProfileLink + '">\
                                 <img class="img-fluid"\
-                                src="'+ msg[0].DesignerProfile[k].ProfileImg + '"\
+                                src="'+ msg[0].StyleProfile[k].ProfileImg + '"\
                                 alt="幸福空間個案圖" class="card-img-top">\
                             </a>\
                         </div>'
                 CaseNews += '<div class="card-body">'
-                for (var z = 0; z < msg[0].DesignerProfile[k].ProfileTag.length; z++) {
+                for (var z = 0; z < msg[0].StyleProfile[k].ProfileTag.length; z++) {
                     // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
                     CaseNews += '\
-                            <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[0].DesignerProfile[k].ProfileTag[z].Tag + '-keyword/">\
-                            '+ msg[0].DesignerProfile[k].ProfileTag[z].Tag + '\
+                            <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[0].StyleProfile[k].ProfileTag[z].Tag + '-keyword/">\
+                            '+ msg[0].StyleProfile[k].ProfileTag[z].Tag + '\
                             </a>\
                             ';
                 }
@@ -676,12 +715,185 @@ function get_views_data() {
             };
 
             $('.CaseNews-Card').html(CaseNews);
-            
+
         });
 
 };
 
+if ($(".views").hasClass("active")) {
+    filter = "hot";
+    // alert('1')
+} else {
+    filter = "new";
+    // alert('2')
+}
+
+function scroll_bottom_load_data(page) {
+
+    $.ajax({
+        method: "GET",
+        // url: `json/cases-${id}.json`,
+        // url:`json/cases.json`,
+        url: `https://m3.hhh.com.tw:18686/gencase?id=${id}&sort=${filter}&page=${page}`,
+        dataType: "json",
+    })
+        .done(function (msg) {
+            let CaseNews = "";
+
+            for (var k = 0; k < msg[0].StyleProfile.length; k++) {
+
+                CaseNews +=
+                    '<div class="col-6 col-md-4 ps-0">\
+                        <div class="vue-waterfall-slot">\
+                            <div class="card">\
+                                <a href="'+ msg[0].StyleProfile[k].ProfileLink + '">\
+                                    <img class="img-fluid" src="'+ msg[0].StyleProfile[k].ProfileImg + '" alt="幸福空間個案圖" class="card-img-top">\
+                                </a>\
+                            </div>'
+                CaseNews += '<div class="card-body">'
+                for (var z = 0; z < msg[0].StyleProfile[k].ProfileTag.length; z++) {
+                    // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
+                    CaseNews += '\
+                        <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[0].StyleProfile[k].ProfileTag[z].Tag + '-keyword/">\
+                        '+ msg[0].StyleProfile[k].ProfileTag[z].Tag + '\
+                        </a>\
+                        ';
+                }
+                CaseNews += '</div></div></div></div>'
+            };
+            $('.CaseNews-Card').append(CaseNews);
+        });
+
+}
+
+
+
+$(window).scroll(function () {
+    var scrollTop = $(this).scrollTop();
+    var scrollHeight = $('body').prop("scrollHeight");
+    //一樣 var scrollHeight2 = document.documentElement.scrollHeight;
+    var clientHeight = document.documentElement.clientHeight;
+    if (jQuery(window).width() < 767) {
+
+        // console.log(scrollHeight);
+        // console.log(scrollTop);
+        //一樣 var scrollHeight2 = document.documentElement.scrollHeight;
+
+        //https://stackoverflow.com/questions/10423759/plain-javascript-to-jquery-clientheight
+
+        // console.log('scrollTop:', scrollTop);
+        // console.log('scrollHeight:', scrollHeight);
+        // console.log('clientHeight:', clientHeight);
+
+
+        if (scrollTop + clientHeight >= scrollHeight - 5) {
+            loadMore_m();
+            console.log(page);
+        }
+    } else {
+
+        // if (($(document).height() - 390) > $(window).scrollTop() + $(window).height() && $(window).scrollTop() + $(window).height() >= ($(document).height() - 400)) {
+        //     loadMore();
+        //     console.log(page);
+
+        // }
+
+        if (scrollTop + clientHeight >= scrollHeight - 5) {
+            loadMore();
+            console.log(page);
+
+        }
+    }
+
+
+})
+
+
+
+// $(window).scroll(function () {
+//     var scrollTop = $(this).scrollTop();
+//     var scrollHeight = $('body').prop("scrollHeight");
+//     // console.log(scrollHeight);
+//     // console.log(scrollTop);
+//     //一樣 var scrollHeight2 = document.documentElement.scrollHeight;
+//     var clientHeight = document.documentElement.clientHeight;
+
+//     //https://stackoverflow.com/questions/10423759/plain-javascript-to-jquery-clientheight
+
+//     // console.log('scrollTop:', scrollTop);
+//     // console.log('scrollHeight:', scrollHeight);
+//     // console.log('clientHeight:', clientHeight);
+
+//     if (($(document).height() - 390) > $(window).scrollTop() + $(window).height() && $(window).scrollTop() + $(window).height() >= ($(document).height() - 400)) {
+//         loadMore();
+//         console.log(page);
+
+//     }
+
+// })
+
+
+
+
+var page = 1;
+function loadMore() {
+
+    // console.log(page);
+
+    setTimeout(function () {
+    page++;
+    // console.log(page);
+    scroll_bottom_load_data(page);
+
+    return page
+    }, 1000); 
+}
+
+function loadMore_m() {
 
+    // console.log(page);
+
+    setTimeout(function () {
+        page++;
+        // console.log(page);
+        scroll_bottom_load_data(page);
+
+        return page
+    }, 500);
+}
+//if成立 只加一次
+
+// $(document).ready(function () {
+//     var page = 1;
+//     $(window).scroll(function () {
+//         let last = document.querySelector('.CaseNews-Card > div:last-child');
+//         if ($(window).scrollTop() > last.offsetTop) {
+//             page++
+//             console.log(page);
+//             // $("#click_test").trigger("click");
+//             // scroll_bottom_load_data(page);
+//         }
+//     });
+// });
+
+// $(window).scroll(function () {
+//     // var scrollz = $(document).scrollTop();
+//     // console.log(scrollz);
+//     // var scrolly = $(document).height();
+//     // console.log(scrolly);
+//     // var scrollx = $(window).height();
+//     // console.log(scrollx);
+//     if ($(window).scrollTop() + $(window).height() == $(document).height()) {
+
+
+//         page++;
+//         console.log(page);
+//         scroll_bottom_load_data(page);
+
+//         // alert("Reached bottom!");
+
+//     }
+// });
 
 
 // $(document).ready(function () {
@@ -699,5 +911,4 @@ function get_views_data() {
 //         // }
 
 //     });
-// });
-
+// });