在调整浏览器大小之前平铺未初始化图像的脚本

时间：2015-06-01 05:26:57

标签： javascript jquery

我有一个页面应该像这样平铺图像

enter image description here

但是当你第一次登陆页面时，你会看到所有的图像堆叠在一起

enter image description here

如果您完全调整浏览器的大小，它会将所有内容都移动到位。这就是我在jQuery上实现这一目标的地方

的jQuery 

var colCount = 0;
var colWidth = 300;
var margin = 10;
var spaceLeft = 0;
var windowWidth = 0;
var blocks = [];

$(function(){
  $(window).resize(setupBlocks);
});

function setupBlocks() {
  windowWidth = $(window).width();
  blocks = [];

  // Calculate the margin so the blocks are evenly spaced within the window
  colCount = Math.floor(windowWidth/(colWidth+margin*2));
  spaceLeft = (windowWidth - ((colWidth*colCount)+(margin*(colCount-1)))) / 2;
  console.log(spaceLeft);

  for(var i=0;i<colCount;i++){
    blocks.push(margin);
  }
  positionBlocks();
}

function positionBlocks() {
  $('.block').each(function(i){
    var min = Array.min(blocks);
    var index = $.inArray(min, blocks);
    var leftPos = margin+(index*(colWidth+margin));
    $(this).css({
      'left':(leftPos+spaceLeft)+'px',
      'top':min+'px'
    });
    blocks[index] = min+$(this).outerHeight()+margin;
  }); 
}

// Function to get the Min value in Array
Array.min = function(array) {
    return Math.min.apply(Math, array);
};

我认为必须有一些我没有正确包装的东西。

在HTML中，我在<body>

上有这个

HTML 

<body onload="setupBlocks();">

我的猜测是导致问题的一行是

$(function(){
  $(window).resize(setupBlocks);
});

我只是谷歌，但我不知道那里有什么叫做我的其他选择。你能帮我解决这方面的信息差距。

编辑：我得到的教程工作正常，因为他的所有项目都是手工编码的。但在我的项目中，所有都被加载到胡子模板中。

所以虽然我可以让我的脚本加载onload我想，如何在加载时启动它，然后在调整大小时再次启动它？

1 个答案:

答案 0 :(得分：2)

加载页面后调用setupBlocks函数：

$(function(){
    setupBlocks();
    $(window).resize(setupBlocks);
});

编辑：

查看您的html页面，看起来您在加载页面后动态创建元素。尝试在html页面中更新此代码：

$(function() {
    $.getJSON('img.js', function(data) {
        var template = $('#imgtpl').html();
        var html = Mustache.to_html(template, data);
        $('#image-list').html(html);
        setupBlocks();
    });
});
相关问题
最新问题