2

几天后，没有找到任何可以指导我找到解决方案的信息，我希望各位高手能提供帮助。该解决方案非常简单，但我不确定要搜索什么。

情况：

我正在为图像创建一个列布局，该布局主要使用 javascript 进行布局，但我需要它在需要多少列方面具有灵活性 - 例如可以从 1 到 20。

到目前为止，我的想法是获取位于我的包装器中的所有图像，然后说如果我有 9 张图像并且我有 3 列然后遍历所有图像，但分配一个与列相对应的类（从 1 到 3）和在我动态创建的新列（div）下重新定义它们。

HTML 标记如下，包含 9 个示例图像：

<div id="imgWrapper">
    <img src="http://placekitten.com/301/300" class="flexImg">
    <img src="http://placekitten.com/302/300" class="flexImg">
    <img src="http://placekitten.com/303/300" class="flexImg">
    <img src="http://placekitten.com/304/300" class="flexImg">
    <img src="http://placekitten.com/305/300" class="flexImg">
    <img src="http://placekitten.com/306/300" class="flexImg">
    <img src="http://placekitten.com/307/300" class="flexImg">
    <img src="http://placekitten.com/308/300" class="flexImg">
    <img src="http://placekitten.com/309/300" class="flexImg">
</div>

CSS是：

#imgWrapper{
    /*No styles for the imgWrapper as it's just for selecting so far*/
}
img.flexImg{    
    width: 100% ;
    height: auto ;
    float: left;
    position: relative; 
}
.column{
    float: left;
    position: relative;
    /* the width is img-wrapper (which is 100%) devided by how many columns */
    width: 33.3% ;
    height: auto;
}

案子：

  1. 假设我想要 3 列然后我会将其设置为我的 js 中的变量。
  2. 然后我想创建 3 个名为 flexi-column-01、flexi-column-02 和 flexi-column-03。
  3. 然后我想获取其中包含的所有图像<div id="imgWrapper">并将第一个图像添加到第一个 div 然后将第二个图像添加到第二个 div 和第三个 img 到第三个 div然后我想将第四个图像添加到第一个 div 等等.. .

我尝试了各种方法，将所有图像添加<div id="imgWrapper">到数组中，然后对其进行切片并将它们添加到新的 div 中，但没有运气。

到目前为止，我想出的最好的是以下内容，但在我可以拥有多少列方面并不灵活。

$(document).ready(
  function flexiColumns () {
    var wrapper     = $('div#imgWrapper'),
        selSize     = wrapper.children('img').length,
        colCount    = 3,
        colSize     = selSize / colCount,
        colEntries  = $(wrapper).find('img').addClass('flexi-img-selector');

        colOne      = $(wrapper).append('<div class="columnOne" />'),
        colTwo      = $(wrapper).append('<div class="columnTwo" />'),
        colThree    = $(wrapper).append('<div class="columnThree" />'),

        firstCol    = $('img.flexi-img-selector:nth-child(3n+1)').addClass('first'),
        secondCol   = $('img.flexi-img-selector:nth-child(3n+2)').addClass('second'),
        thirdCol    = $('img.flexi-img-selector:nth-child(3n+3)').addClass('third');

         // CREATE THE BLOCK COLUMNS
        for (var i = 0; i <  colCount; i++){
         $(wrapper).append('<div class="flexi-column-0' + i + '" />')

        }

   $(firstCol).appendTo($('.columnOne'));
   $(secondCol).appendTo($('.columnTwo'));  
   $(thirdCol).appendTo($('.columnThree'));
  } // END FUNCTION FLEXICOLUMN
); // END DOCUMENT READY

如果有帮助的话，我已经整理了我到目前为止所拥有的 jsfiddle：http: //jsfiddle.net/Djk9e/

任何形式的关于我如何解决这个问题的指导或建议都非常受欢迎。如果您需要更多信息或示例，请告诉我。

提前谢谢你， Sofus

4

1 回答 1

1

只有一个可能的解决方案的快速草稿：

for (var i = 0; i <  colCount; i++){
      $(wrapper).append('<div class="column" id="col_'+i+'" style="width:' + colSize + '%;" />');

      var images = $('img').splice(0, Math.round(selSize/colCount));
      $(images).appendTo($('#col_'+i));
    }

http://jsfiddle.net/Djk9e/15/

列宽是动态计算的——不需要带有标记的静态 css 选择器。

它背后的想法：切片图像数组并将其附加到其包装列（仅当列数和图像配对时才匹配！）。之后选择剩余的图像并通过其索引将它们分配给列。

这不是完整的解决方案，而且非常老套——不要在生产环境中使用它；）

于 2013-01-16T19:06:01.560 回答