Question

我有一个带有图像的三个网格的图库。网格大小根据屏幕大小而变化，我使用Media-Query实现了这一点 - 即，在桌面上，网格的宽度为33％，使三列视图彼此相邻，而在平板电脑上，它将为50％制作两列视图，并在手机上为每个网格制作一个列视图100％。

我这样做的原因是创建一个包含不同高度图像的平铺图库 - 如果我按照正常方式创建它，它会在浮动时生成白色空格。

所以为了解决这个问题，并且在这个网站上很少有成员的帮助下，我们创建了一个JavaScrip函数，它将Grid3中的所有图像同样地移动到Grid1＆amp; Grid2当屏幕尺寸为平板电脑时，我们摆脱了第三个网格，可以看到精细的两列。一切都很好！

现在，问题是 - 在Chrome＆amp; IE - 由于某些原因，我需要你的帮助才能帮我找到它之前，该功能正在被解雇！请在这里试一试：[http://90.195.175.51:93/portfolio.html][2]

慢慢地在Chrome或IE上 - （也在Firefox上尝试） - 尝试将窗口从大到小重新调整大小，您会注意到在顶部标题更改为响应式标题之前（表明您是在小屏幕上）图像已发送到Grid1和Grid 2！但是之前的几个px。正如它所说的功能一样，它在＆lt; 770上点燃它。

希望我的问题足够明确，可以帮助我解决这个阻止我启动网站的问题。感谢。

这是JavaScrip：

//Gallery Grid System//
var testimonial = $(".testimonial, .galleryItem", "#grid3");
(function () {
    $(document).ready(GalleryGrid);

    $(window).resize(GalleryGrid);
})(jQuery);

function GalleryGrid() {
    var grid3 = $('#grid3');
    var width = $(window).width();
    if (width < 1030 && width > 770) {
        var grid1 = $('#grid1');
        var grid2 = $('#grid2');

        for (var i = 0; i < testimonial.length; i++) {
            if (i < testimonial.length / 2) {
                grid1.append(testimonial[i]);
            } else {
                grid2.append(testimonial[i]);
            }
        }
    } else {
        grid3.append(testimonial);
    }
}

注意：以下是包含所有功能的整个页面：

 $(document).ready(function () {

     //Prevent clicking on .active links
     $('.active').click(function (a) {
         a.preventDefault();
     });


     //Allow :active on touch screens
     document.addEventListener("touchstart", function () {}, true);


     //Hide toolbar by default
     window.addEventListener('load', function () {
         setTimeout(scrollTo, 0, 0, 0);
     }, false);


     //Scroll-up button
     $(window).scroll(function () {
         if ($(this).scrollTop() > 100) {
             $('.scrollup').fadeIn();
         } else {
             $('.scrollup').fadeOut();
         }
     });

     $('.scrollup').click(function () {
         $("html, body").animate({
             scrollTop: 0
         }, 600);
         return false;
     });


     //StickyBox
     $(function () {
         $.fn.scrollBottom = function () {
             return $(document).height() - this.scrollTop() - this.height();
         };
         var $StickyBox = $('.detailsBox');
         var $window = $(window);

         $window.bind("scroll resize", function () {
             var gap = $window.height() - $StickyBox.height() - 10;
             var footer = 288 - $window.scrollBottom();
             var scrollTop = $window.scrollTop();

             $StickyBox.css({
                 top: 'auto',
                 bottom: 'auto'
             });

             if ($window.width() <= 770) {
                 return;
                 $StickyBox.css({
                     top: '0',
                     bottom: 'auto'
                 });
             }

             if (scrollTop < 50) {
                 $StickyBox.css({
                     bottom: "auto"
                 });

             } else if (footer > gap - 100) {
                 $StickyBox.css({
                     top: "auto",
                     bottom: footer + "px"
                 });

             } else {
                 $StickyBox.css({
                     top: 80,
                     bottom: "auto"
                 });
             }
         });
     });


     //Change items location depending on the width of the screen//
     $(function () { //Load Ready

         function myFunction() {
             var insert = $(window).width() <= 770 ? 'insertBefore' : 'insertAfter';
             $('#home-sectionB img')[insert]($('#home-sectionB div'));
             $('#home-sectionD img')[insert]($('#home-sectionD div'));
         }
         myFunction(); //For When Load
         $(window).resize(myFunction); //For When Resize
     });


     //Contact Form//
     $(".input").addClass('notSelected');
     $(".input").focus(function () {
         $(this).addClass('selected');
     });

     $(".input").focusout(function () {
         $(this).removeClass('selected');
     });

     $(document).ready(function () {
         GalleryGrid();
         $(window).resize(GalleryGrid);
     });
     //Gallery Grid System//
     var testimonial = $(".testimonial, .galleryItem", "#grid3");
     (function () {
         $(document).ready(GalleryGrid);

         $(window).resize(GalleryGrid);
     })(jQuery);

     function GalleryGrid() {
         var grid3 = $('#grid3');
         var width = $(window).width();
         if (width < 1030 && width > 770) {
             var grid1 = $('#grid1');
             var grid2 = $('#grid2');

             for (var i = 0; i < testimonial.length; i++) {
                 if (i < testimonial.length / 2) {
                     grid1.append(testimonial[i]);
                 } else {
                     grid2.append(testimonial[i]);
                 }
             }
         } else {
             grid3.append(testimonial);
         }
     }


     //Testimonials Animation//
     $(".testimonial").hover(function () {
         $(".testimonial").addClass('testimonialNotActive');
         $(this).removeClass('testimonialNotActive').addClass('testimonialActive');
     },

     function () {
         $(".testimonial").removeClass('testimonialNotActive');
         $(this).removeClass('testimonialActive');
     });


     //Portfolio Gallery Filter//
     (function () {
         var $portfolioGallerySection = $('#portfolio-sectionB'),
             $filterbuttons = $('#portfolio-sectionA a');

         $filterbuttons.on('click', function () {
             var filter = $(this).data('filter');

             $filterbuttons.removeClass('portfolio-sectionAClicked');
             $(this).addClass('portfolio-sectionAClicked');

             $portfolioGallerySection.attr('class', filter);
             $('.galleryItem').removeClass('selectedFilter');
             $('.galleryItem.' + filter).addClass('selectedFilter');
         });
     }());
 });

Answer 1

你的问题是CSS媒体查询和jQuery的$(window).width()并不总是对齐。

function getCSSWidth() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return e[ a+'Width' ];
}

使用此代替$(window).width()

从http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/修改

Answer 2

我认为这可以解决您的问题（但我不太确定）

//Put that before the document ready event
(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// Here you call GalleryGrid (replace $(window).resize(GalleryGrid) with that):
$(window).smartresize(GalleryGrid);

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Answer 3

原因是您的 垂直滚动条 。您的内容固定为宽度= 1030，但是当窗口大小为1030时，视口的大小实际为：窗口大小（1030） - 垂直滚动条

尝试设置

<body style="overflow:hidden">

删除滚动条后，您会看到它正常工作。或尝试设置：

<link href="assets/css/tablets-landscape.css" rel="stylesheet" type="text/css" media="screen and (max-width : 1045px)"/>

设置max-width:1045px以弥补滚动条，您会看到它正常工作。

你的javascript应该是这样的：

var width = $(window).width() + verticalscrollbarWidth;

JavaScript在其时间之前被触发，*仅在Chrome＆amp; IE

3 个答案: