滚动时添加html元素

Question

当我向下滚动鼠标时，我想在我的 HTML 代码中添加一个新的 Bootstrap 行。能否提供一下 JavaScript 代码？

<div class="row">
    <div class="col-md-6 col-xs-6" >
        <div>
            <img src="img/picture1.jpg" alt="pic1">
        </div>
        <div class="col-md-6 col-xs-6">
            <div>
                <img src="img/temp/picture2.jpg" alt="pic2">
            </div>
        </div>
    </div>
</div>

Answer 1

向父 div 添加一行：

HTML：

<div id="parent">
   <div class="row">
      <div class="col-md-6 col-xs-6" >
        <div>
            <img src="img/picture1.jpg" alt="pic1">
        </div>
        <div class="col-md-6 col-xs-6">
            <div>
                <img src="img/temp/picture2.jpg" alt="pic2">
            </div>
       </div>
   </div>
</div>

jQuery：

$(window).scroll(function() {
  var numItems = $('.row').length;
  if(numItems <= 2){
     $( "#parent" ).append( "<div class='row'>New Row</div>" );
  }
});

您是否希望它从某个点出现/滚动？

如果是这种情况，您可以在最后一行到达顶部时使用它：

jQuery:

$(window).scroll(function() {
  var distance = $('.row:last').offset().top,    $window = $(window);
   if ( $window.scrollTop() >= distance ) {
        var numItems = $('.row').length;
        if(numItems <= 2){
           $( "#parent" ).append( "<div class='row'>New Row</div>" );
        }
   }
});