如何在所有帖子的底部放置Ajax Load More按钮？

Question

在此屏幕截图中，如果您查看东北角，您将找到20％的Ajax加载更多按钮。

在我关闭循环以获取此类别的帖子后，我在模板文件中使用do_shortcode方法调用它。

NSArray * images = [[webView stringByEvaluatingJavaScriptFromString:
    @"var imgs = []; for (var i = 0; i < document.images.length; i++) "
        "imgs.push(document.images[i].src); imgs.toString();"]
    componentsSeparatedByString:@","];

我如何将它放在新的一行？

现场演示 - ＆gt; http://www.technobyte.org/interesting-facts/

Answer 1

这就是我如何标记这样的东西。 https://jsfiddle.net/sheriffderek/wcoyc0hf

我看到你正在使用PHP - 但是同样的想法也适用，因为PHP创建了HTML。

＆＃34;在它周围放一个边框＆＃34; - 是看到你的浮动和其他样式打破事物流动的神奇方式 - 并且需要通过明确修正来解决 - 在浮点数的情况下/或通常只是确保事物保持其形状并且列表的父亲是扩大以适当地保持它们。

标记

<section class='stuff'>

  <ul class='thing-list'>
    <li class='thing'>
      <a href="#" class='image-wrapper link'>
        <img src="https://placehold.it/800" alt="thumbnail">
      </a>
    </li>

    <li class='thing'>
      <a href="#" class='image-wrapper link'>
        <img src="https://placehold.it/800" alt="thumbnail">
      </a>
    </li>

    <li class='thing'>
      <a href="#" class='image-wrapper link'>
        <img src="https://placehold.it/800" alt="thumbnail">
      </a>
    </li>
  </ul>

  <div class='get-more'>
    <button>more...</button>
  </div>

</section>

样式

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.thing .link {
  display: block; /* link needs to be a block here to have shape */
  border: 1px solid red;
}

.thing-list {
  overflow: hidden; /* should be a clearfix or use flexbox */
}

.thing-list .thing {
  float: left;
  max-width: 33%;
}

.get-more {
  border: 1px solid blue;
  text-align: center;
}

.get-more button {
  display: inline-block;
}