javascript - 响应式侧滚动博客页面问题

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,000 像素。从垂直调整为水平时，它很好并且适合。不确定是什么原因造成的。