Question

我试图整理一个“板”，你可以使用砌体添加各种尺寸的元素，并试图找出如果容器已满并且元素开始溢出它时如何停止附加新元素的可能性。

代码：

HTML

<input id="width" value="0" type="text"></input>
<input id="height" value="0" type="text"></input>
<input id="mLeft" value="0" type="text"></input>
<input id="mRight" value="0"type="text"></input>
<button>Add container</button>

的jQuery

$('button').click(function(){
    var $pWidth = jQuery("#width").val();
    var $truePWidth = $pWidth * 15;
    var $pHeight = jQuery("#height").val();
    var $truePHeight = $pHeight * 15;
    var $mLeft = jQuery("#mLeft").val();
    var $trueMLeft = $mLeft * 15;
    var $mRight = jQuery('#mRight').val();
    var $trueMRight = $mRight * 15;
    $container.append("<div class='box'><div class='remove'></div></div>").masonry( 'reload', function(){
           $(".box").each(function(i) {
                 $(this).attr("id", "item"+(i+1));
            });
        $($container).children('.box:last-child').css({'height' : $truePHeight + 'px', 'width': $truePWidth + 'px', 'margin-right' : $trueMRight + 'px', 'margin-left' : $trueMLeft + 'px' });
        $container.masonry( 'reload');
    } );

});

容器（var $ container = #container），其中添加的元素（.box）是1600px高。

提前致谢！

/纳斯

Answer 1

我道歉。我在手机上，所以我不能做代码，但你可以简单地为容器设置CSS，如下所示：

.box {
     max-height: 1600px;
     overflow-y: scroll;
 }

这将为容器提供滚动条，而不是扩展容器的高度，同时仍然允许用户附加无限量的框。

附加元素 - 当元素开始溢出容器时停止追加

1 个答案: