【jQuery】複数のポストロードjQueryプラグイン。load More

load Moreは軽量で必要に応じてポストまたはdiv要素を読み込むjQueryプラグイン。無限スクロール、ボタンクリックで読み込みを使用できます。

infinity-json

loadmore-json

loadmore onepage

loadmore onepageを参照

<link rel="stylesheet" href="../animate.css">

CSS

<style>
body {
font-family: cursive;
margin: 0;
}
.list {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
.list li {
list-style: none;
width: 33.3%;
float: left;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 20px;
display: none;
}
.list span {
background: #77787b;
color: #fff;
display: block;
text-align: center;
padding: 15px;
min-height: 400px;
}
* {
box-sizing: border-box;
}
.load-btn {
margin: auto;
display: block;
padding: 5px 10px;
color: #fff;
background: #3a3b3e;
border: none;
margin-bottom: 200px;
cursor: pointer;
}
</style>

HTML

<body>
<div class="conatiner">
<ul class="list" id="list">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span>13</span></li>
<li><span>14</span></li>
<li><span>15</span></li>
<li><span>16</span></li>
<li><span>17</span></li>
<li><span>18</span></li>
<li><span>19</span></li>
<li><span>20</span></li>
<li><span>21</span></li>
<li><span>22</span></li>
<li><span>23</span></li>
<li><span>24</span></li>
<li><span>25</span></li>
</ul>
<button id="btn" class="load-btn">Load More..</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="./loadmore.js"></script>
<script>
$("#list").loadMore({
selector: 'li',
loadBtn: '#btn',
limit: 3,
load: 3,
animate: true,
animateIn: 'fadeInUp'
});
</script>
</body>

MITライセンス

 
load More

【jQuery】複数のポストロードjQueryプラグイン。load More

  • LATEST
  • RELATED
  • POPULAR