CodePen上的响应式网格JQuery问题

Question

我正在尝试让这个响应式网格在CodePen上工作。由于某些原因，当页面加载时，它不能正确排列。当我调整浏览器的大小时，它可以正确地调整大小。当页面加载时，我如何让它工作？

http://codepen.io/KoniG87/pen/vyqds (原作者说，它只在使用百分比宽度时不起作用，但我尝试了像素宽度，这也不起作用。)

下面是有问题的CSS：

    #big_box{
max-width:100%;
background:#fff;
margin:0 auto; 
height:auto;    
}

下面是jQuery：

    $(document).ready(function() {
     $(window).resize(function() {
            var winWidth = $(window).width();
            var parentWidth = $('#big_box').innerWidth();
             var divider = parentWidth /96 ; 

                $('#big_box img').css( "margin", divider );

            if(winWidth < 321) {
            parentWidth = 320;
           $('#big_box').innerWidth('100%');
            $('.box-1').width( divider * 94) ;        //1 column
            $('.box-2').width( divider * 94) ;
            $('.box-3').width( divider * 94) ;
            $('.box-4').width( divider * 94) ;
            } 
                else if(winWidth < 480) {
            parentWidth = 480;
                  $('#big_box').innerWidth('100%');
            $('.box-1').width(divider * 46).height(divider * 46) ;    //2 col
            $('.box-2').width(divider * 94).height(divider * 46) ;
            $('.box-3').width(divider * 46).height(divider * 94) ;
            $('.box-3').css( "float","left" ) ;
            $('.box-4').width(divider * 94).height(divider * 94) ;
            } 
                else if(winWidth < 768) {
            parentWidth = 768;
                   $('#big_box').innerWidth(480);
            $('.box-1').width(divider * 30).height(divider * 30) ;    //3 col
            $('.box-2').width(divider * 62).height(divider * 30);
            $('.box-3').width(divider * 30).height(divider * 62);
            $('.box-3:first').css( "float","right" ) ;
            $('.box-4').width(divider * 62).height(divider * 62) ;
            } 
                else if(winWidth < 1024) {
            parentWidth = 1024;
                  $('#big_box').innerWidth(720);
            $('.box-1').width(divider * 22).height(divider * 22) ;    //4 col
            $('.box-2').width(divider * 46).height(divider * 22) ;
            $('.box-3').width(divider * 46).height(divider * 94) ;
            $('.box-3').css( "float","right" ) ;
            $('.box-4').width(divider * 46).height(divider * 46) ;

            }
                else if(winWidth < 1224) {
            parentWidth = 1224;
                  $('#big_box').innerWidth(960);
            $('.box-1').width(divider * 14).height(divider * 14);    //6 col
            $('.box-2').width(divider * 30).height(divider * 14) ;
            $('.box-2:first').width(divider * 62).height(divider * 30) ;
            $('#big_box img:nth-child(12)').width(divider * 62).height(divider * 30) ;
            $('#big_box img:nth-child(23)').width(divider * 62).height(divider * 30) ;
            $('.box-3').width(divider * 14).height(divider * 30) ;
            $('.box-3').css( "float","left" ) ;
            $('.box-4').width(divider * 30).height(divider * 30) ;
            }
                else {
            parentWidth = 1824;

            };
        });
$(window).trigger('resize');
});

Answer 1

老实说，我从来没有想过在没有实际调整窗口大小的情况下触发调整大小。我建议使用这种方法：

function stuffToDo(){
   //do all the things
}

$(document).ready(stuffToDo);
$(window).resize(stuffToDo);

只需记住，调整大小将会引发大量问题，因此您可能需要考虑添加一个去抖动函数(from David Walsh)。

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};