Question

我正在使用类似于Pinterest使用的javascript，它创建具有相同间距的可变高度div。我遇到的问题是移动视图中最后一个div的底部边距比它应该短20px。我发现如果我检查元素并将20px添加到容器的高度，该容器包含所有帖子，它看起来应该是这样。我只是不确定如何在代码本身中执行此操作，因为它是通过javascript应用的计算高度。

这是HTML：

<div id="post-container" class="grid_4_desktop grid_4_tablet grid_1_mobile">
        <?php 
            if($year !==''){
        ?>
        {exp:channel:entries channel="news_articles" start_on="<?php echo $year-1;?>-12-31 00:01" stop_before="<?php echo $year;?>-12-31 00:01" orderby="date"  sort"desc" }
        <?php 
            }else{
        ?>
        {exp:channel:entries channel="news_articles" orderby="date" sort"desc" limit="15"}
        <?php
            }
        ?>

        <div class="post">
             <a href="{path=news/article/{url_title}}?year={entry_date format='%Y'}">
                 {if article_thumb!=''}
                    <img width="216" height="143" title="Meeting" src="{article_thumb}" />
                 {/if}
            </a>
            <div class="inner small">
                <p class="date">{entry_date format="%D %F %d, %Y"}</p>
                <h3 class="title">
                    <a href="{path=news/article/{url_title}}?year={entry_date format='%Y'}">{article_title}</a>
                </h3>
                <p>{exp:ce_str:ing truncate='120|...<br /><a href="{path=news/article/{url_title}}?year={entry_date format='%Y'}">Read More</a>'}{article_content}{/exp:ce_str:ing}</p>


                <div class="social clearfix">
                    <a href="javascript:createFacebookLink('{current_url}','<?php shuffle($fbShareTxt); echo $fbShareTxt[0];?>', '{article_title}', '{site_url}_img/_layout/logo_orange_200x200.png');" class="icon facebook"></a>
                    <a href="javascript:createTwitterLink('{current_url}','<?php shuffle($fbShareTxt); echo $fbShareTxt[0];?>');"class="icon twitter"></a>
                </div>
            </div>
        </div>
        {/exp:channel:entries}
    </div><!-- end post-container -->

设置高度的脚本：

function setNewsGrid(columns,columnWidth,offset){
      $('#post-container').show();
            var item, top, left, i=0, plength=$('#post-container .post').length, cHeight=0;
            for(; i<plength; i++ ) {
              item = $('#post-container .post:eq('+i+')');
              var t = 0;
              if(i-columns > -1){
                t =  $('#post-container .post:eq('+(i-columns)+')').outerHeight() +  $('#post-container .post:eq('+(i-columns)+')').position().top +offset;
              }
              // Postion the item.
              item.css({
                position: 'absolute',
                top: t,
                left: (((i%columns)*columnWidth) + ((i%columns)*offset))+'px'
              });
              if(t+item.outerHeight() > cHeight)cHeight=t+item.outerHeight();
            }
          $('#post-container').css('height',cHeight);
      }

基本上我只想将20px添加到生成的高度，以便底部边距不会切断最终的div。

Answer 1

我弄清楚了，我刚改变了这一行：

if(t+item.outerHeight() > cHeight)cHeight=t+item.outerHeight();

对此：

if(t+item.outerHeight() > cHeight)cHeight=t+20+item.outerHeight();

现在它的工作方式应该如此。

向容器的可变高度添加20px高度

1 个答案: