Question

这是我创建的脚本，以便在流体/固定容器中很好地显示图库。

重点是将缩略图均匀放置在行中，同时保持每行的第一个和最后一个缩略图。

要做到这一点，我需要计算应用于每个缩略图的余量，这就是这个脚本的内容（只有最后一部分是相关的，但我把它全部放在这里，以防它有用）。

我检查了变量并且它们都没问题但是，无论出于什么原因，＆＃34; nth-child＆＃34;脚本末尾的选择器不具有选择性，即使变量正确，样式也会应用于＆＃34; pic_block＆＃34;的所有实例。类：

<script>

  $(document).ready(function() {

     // Get the width of the container and thumbnails

     var containerWidth       = $('.container').width();

     var boxWidth             = $('.pic_block').width();

     // How many thumbnails can I have per row?

     var boxesPerRow         = Math.floor(containerWidth/boxWidth);

     // And then what is the remaining space left between the last thumbnail and the container?

     var marginTotalWidth     = (containerWidth-(boxesPerRow*boxWidth));

     // What is the maximum margin-right I can set to get an equal distance between the thumbnails (except the last box)?

     var tempMarginR          = Math.floor(marginTotalWidth/(boxesPerRow-1));

     // Then, what is the space still remaining between the last thumbnail and the container?

     var extraTotalSpaceWidth = ((marginTotalWidth/(boxesPerRow-1)) - tempMarginR) *boxesPerRow;

     // Time to set some variables that would help me dispatching the remainig space between the thumbnails

     var p                    = 1; 

     var i                    = extraTotalSpaceWidth;

     var marginR              = [];     


     // By default, all the thumbnails in a row (but the last one) get the same margin-right -> this will be fined-tuned in a later loop

     while(p <= boxesPerRow) 
     {
         if(p < boxesPerRow)
         {
            marginR[p]=tempMarginR;     
         }
         else
         {
            marginR[p]=0;   
         }

         $('.pic_block:nth-child('+ p +'n)').css('margin-right',marginR[p]);

         p++;
     }      

     // And if, after that, there is still at least 1px of extra space left...

        while(i >= 1)
        {    
            var s=1;

            // add incrementaly an extra margin to the right of each thumbnail of a row (except the last one) until there is no more space left

            while( s < boxesPerRow) 
            {   
               marginR[s] = marginR[s]++;

               if(i >= 1)
               { 
                   /********************************************************************/   
                   /* Here is the problem: this doesn't only apply to the nth-children */
                   /* determined by the "s" variable, it applies to all the class.     */
                   /********************************************************************/ 

                   $('.pic_block:nth-child('+ s +'n)').css('margin-right', marginR[s]); 

                   i--;
               };   

               s++; 
            }
        };       
  });

</script>

对于完整代码（包括html / css），它是：http://jsfiddle.net/Pf7VV/

任何帮助都将不胜感激。

谢谢。

Answer 1

迭代变量s旁边似乎有一个不必要的n！

它应该是这样的：

$('.pic_block:nth-child('+s+')')

Answer 2

我可以选择使用带有jquery的nth-child，可能问题出在你的html或选择器中

.pic_block:nth-child(2)并不是指具有类pic_block的元素的第二个子元素，而是具有类pic_block的第二个元素

看看这是否会给你一些灵感http://jsfiddle.net/sfarsaci/E8vN8/1/

修改

我认为这就是你想要的

http://jsfiddle.net/sfarsaci/2JeK2/

Answer 3

让它工作，代码被简化（我摆脱了2个循环和1个数组）！

   <script>

    $(document).ready(function() 
    {
         var containerWidth       = $('.container').width();
         var thumbWidth           = $('.pic_block').width();
         var thumbsPerLine        = Math.floor(containerWidth/thumbWidth);
         var marginTotalWidth     = (containerWidth-(thumbsPerLine*thumbWidth));
         var tempMarginR          = Math.floor(marginTotalWidth/(thumbsPerLine-1));
         var extraTotalSpaceWidth = ((marginTotalWidth/(thumbsPerLine-1)) - tempMarginR) *thumbsPerLine;
         var i                    = Math.floor(extraTotalSpaceWidth); 
         var n                    = 1;           

         $('.pic_block').css('margin-right',tempMarginR);

         while( n <= thumbsPerLine) 
         {      
             if(n == thumbsPerLine)
             {
                 $('.pic_block:nth-child('+n+'n)').css('margin-right',0); 
             }
             else
             {
                 if(i>0)
                 {
                     $('.pic_block:nth-child('+thumbsPerLine+'n+1)').css('margin-right','+=1');  
                     i--;
                 };
             };
             n++; 
         }       
      });

  </script>

现在，无论容器的宽度如何，画廊总是完全展开，在最左侧和右侧位置没有边距，缩略图之间的空间将尽可能均匀。

这是jsFiddle（调整结果部分的大小并观察缩略图自动适合容器）：

http://jsfiddle.net/Baylock/ZkCgv/7/

jQuery和变量nth-child无法正常工作

3 个答案: