javascript – jQuery图像网格系统

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

我从codepen.io创建了这个DEMO

在本演示中,您可以看到：

这个DEMO工作得很好但是.我的问题是如何在这个css中使用我的网格系统：

我为此创建了第二个演示：第二个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();
});

谁能在这方面帮助我？提前感谢您的回答.

最佳答案

由于您将动态创建HTML,因此应删除.photo-row容器,但保留.photo-item,如下所示：

然后你可以做的就是在页面加载时用.photo-row包装你的元素.首先从各种两个开始：

var imgGrab  = $('.photo-item'); //photos
var imgLength = imgGrab.length; //number of photos

for ( i=0; i

然后找到重新发送的那些并用.photo-row包装：

$(".photo-item").each(function(){
   if($(this).parent().is(":not(.photo-row)")){
     $(this).wrap('

这将动态包装您的图像,让CSS完成其工作,无论它们的数量如何：

CODEPEN

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。