響應式滾動的博客頁面問題

Question

我正在嘗試爲客戶端創建一個博客文章頁面，並且在Jquery的幫助下使用了一張表格，使其無限側滾動。問題是，我希望它不小於740px時不會側滾。當我亂七八糟的jquery和調整大小的命令時，表格似乎會變得非常糟糕。我試圖解開td，它變得非常糟糕。

<script> 
     $(function(){ 
     $("#page-wrap").wrapInner("<table cellspacing='10px'><tr>"); 
     $(".post").wrap("<td>"); 
    }); 

    </script> 

這裏是正在實施的內容。

<div id="page-wrap"> 
     <article class="post"> 
     <img src="assets/images/tumblr_nqvdnry3Du1ttpk3mo1_1280.jpg"><p>This is a caption!</p> 
    </article> 
    <article class="post"> 
     <img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo3_1280.jpg"><p>This is a caption!</p> 
    </article> 
    <article class="post"> 
     <img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo2_1280.jpg"><p>This is a caption!</p> 
    </article> 
</div> 

這裏是連接到它的CSS

td { 
     img { 
      max-height: 74vh; 
      max-width: 1280px; 
    } 
    p { 
     font-size:14px; 
     font-family: Gill Sans; 
     margin-bottom:0; 
     line-height: 1.04; 
    } 
} 

我已經用VH，使圖像響應，並在窗口的高度。當我達到740px時，我希望它切換到向下滾動。有人建議使用jQuery來動態獲取頁面上所有圖像寬度的大小，但我不能讓它不能換行。

Answer 1

所以我想通了，但現在有另一個問題。首先是解決方案。拋開桌子，寫下腳本來爲我解決它。

(function($){ 
    var windowH = $(window).height(); 
    var windowW = $(window).width(); 

    $(window).on('load', function(){ 

     if(windowW >= windowH) {//this is horizontal 
     var allImgWidth = 0; 
     $('article img').each(function(){ 
      allImgWidth += $(this).width() + 10 ;//10 is padding 
     }); 
     $('html, body').width(allImgWidth); //makes page width of all images and padding that I have set elsewhere 
     $('article img').height(windowH - 150);//this accounts for header height and margin height from top 

     $('article img').css('margin-left', '10px'); 
     } else { 
      $('article img').width(windowW);//if window width is not greater than window height, the images are the width of the original window 


     }; 
     if(windowW >= windowH) { 
     (function() { 
     function scrollHorizontally(e) { 
      e = window.event || e; 
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
      document.documentElement.scrollLeft -= (delta*80); // Multiplied by 80 (increases speed of scroll) 
      document.body.scrollLeft -= (delta*80); // Multiplied by 80 
      e.preventDefault(); 
     } 
     if (window.addEventListener) { 
      // IE9, Chrome, Safari, Opera 
      window.addEventListener("mousewheel", scrollHorizontally, false); 
      // Firefox 
      window.addEventListener("DOMMouseScroll", scrollHorizontally, false); 
     } else { 
      // IE 6/7/8 
      window.attachEvent("onmousewheel", scrollHorizontally); 
     } 
     })();//function scrollHorizontally ends 
     } else { 
     };//else ends 
    });//onload ends 

})(jQuery);//fucntion ends 


(function($){ 
    $(window).resize(function(){ 
     var windowH = $(window).height(); 
     var windowW = $(window).width(); 
     if(windowW >= windowH) { //horizontal 
     var allImgWidth = 0; 
     $('article img').each(function(){ 
      allImgWidth += $(this).width() + 10 ; 
     }); 
     $('html, body').width(allImgWidth); 
     $('article img').height(windowH - 150); 
     $('article img').css('width','auto');//dynamically resizes pics 
     $('article img').css('margin-left', '10px'); 
     } else { //vertical 
     $('html, body').scrollLeft=0; 
     $('html, body').width(windowW); 
     $('article img').width(windowW); 
     $('article img').css('height','auto'); 
     $('article img').css('margin-top', '10px'); 

     }; 
     if(windowH >= windowW) { 
     $(window).on('mousewheel DOMMouseScroll', function(event){ 
      if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
        // scroll up 
       } 
       else { 
        // scroll down 
       } 
}); 
     } else { 
      $(window).off('mousewheel DOMMouseScroll'); 
      (function() { 
     function scrollHorizontally(e) { 
      e = window.event || e; 
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
      document.documentElement.scrollLeft -= (delta*80); // Multiplied by 80 (increases speed of scroll) 
      document.body.scrollLeft -= (delta*80); // Multiplied by 80 
      e.preventDefault(); 
     } 
     if (window.addEventListener) { 
      // IE9, Chrome, Safari, Opera 
      window.addEventListener("mousewheel", scrollHorizontally, false); 
      // Firefox 
      window.addEventListener("DOMMouseScroll", scrollHorizontally, false); 
     } else { 
      // IE 6/7/8 
      window.attachEvent("onmousewheel", scrollHorizontally); 
     } 
     })();//function scrollHorizontally ends 

     }; 
    });//window resize ends 


})(jQuery);//function ends 

現在，雖然在初始頁面加載該網站是40,000px寬。從垂直到水平調整大小，這很好，很適合。不知道是什麼原因造成的。