jQuery 图像网格系统

【问题标题】：jQuery image Grid SystemjQuery 图像网格系统
【发布时间】：2015-03-04 06:16:28
【问题描述】：

我有一个关于图像网格系统的问题。

我从 codepen.io 创建了这个 DEMO

在这个演示中你可以看到：

<div class="photo-row">
<div class="photo-item">
<!--Posted image here <img src="image/abc.jpg"/>-->
</div>
</div>

此演示运行良好，但是。我的问题是如何在这个 css 中使用我的网格系统：

<div class="photo">

        <div class="photo-row">
            <a href="#"><img src="abc.jpg"/></a>
        </div>
        <div class="photo-row">
            <a href="#"><img src="abc.jpg"/></a>
        </div>
</div>

我为此创建了第二个演示：second DEMO。在第二个演示中，您可以看到网格系统不像第一个那样工作DEMO。

还有我的 jQuery 代码：

(function($,sr){

  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');

/* Wait for DOM to be ready */
$(function() {

    // Detect resize event
    $(window).smartresize(function () {
        // Set photo image size
        $('.photo-row').each(function () {
            var $pi    = $(this).find('.photo-item'),
                  cWidth = $(this).parent('.photo').width();

            // Generate array containing all image aspect ratios
            var ratios = $pi.map(function () {
                return $(this).find('img').data('org-width') / $(this).find('img').data('org-height');
            }).get();

            // Get sum of widths
            var sumRatios = 0, sumMargins = 0,
          minRatio  = Math.min.apply(Math, ratios);
            for (var i = 0; i < $pi.length; i++) {
                sumRatios += ratios[i]/minRatio;
            };

      $pi.each(function (){
        sumMargins += parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
      });

            // Calculate dimensions
            $pi.each(function (i) {
                var minWidth = (cWidth - sumMargins)/sumRatios;
                $(this).find('img')
          .height(Math.floor(minWidth/minRatio))
                    .width(Math.floor(minWidth/minRatio) * ratios[i]);
            });
        });
    });
});

/* Wait for images to be loaded */
$(window).load(function () {

    // Store original image dimensions
    $('.photo-item img').each(function () {
      $(this)
        .data('org-width', $(this)[0].naturalWidth)
        .data('org-height', $(this)[0].naturalHeight);
    });

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

有人可以在这方面帮助我吗？提前感谢您的回答。

【问题讨论】：

• 哇，那里有一些看起来很酷的 JavaScript/jQuery 函数。我注意到在不起作用的代码示例中，您将所有

  都包含在同一个

  中。在有效的示例中，每个

  都有自己的

  。因此，如果您可以以用户发布的图像有自己的

  的方式更改代码，那么我想您的代码应该可以工作:-)
• 我测试了你的代码（不是工作部分）并手动添加个人

  到所有

  ，它开始工作.将用户加载的图像添加到第一个也是唯一的

  的代码部分，如果您可以更改它，那么我想这将使它工作。你的 JavaScript 太先进了，乍一看我无法检测到任何用户加载部分。也许服务器端更改（？）。祝你好运！
• 我哪里做错了？为什么有人给我投票？
• 我认为第二个演示可能正在运行。最初，它没有，但它更新为每个图像单独的

  ；所以在我看来，更新后它看起来还不错。
• 您希望实现什么目标？