jQuery：無限スクロール - Webデザインのこと、いろいろ

f:id:sankoblog:20160719152237p:plain

※これをスクロール分、別フォルダで作成する

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Jockum Nordström｜絵画の本</title>
<link rel="stylesheet" href="../css/style.css">
<link href="https://fonts.googleapis.com/css?family=PT+Serif:700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"><!--AwesomeFont-->
<link rel="shortcut icon" href="../favicon.ico" type="image/vnd.microsoft.ico"/>
</head>

<body>
<div id="container">
<h1>絵画の本</h1>
<div class="book_wrapper">
<h2>Jockum Nordström</h2>
<div class="img_wrapper"><img src="../img/JockumNordstrom.jpg" alt="JogckumNordstrom"></div>
<div id="text">
<p>Jockum Nordstrom (born 1963) is undoubtedly one of the most renowned Swedish artists of his generation. His work is included in world-class museums, such as The Museum of Modern Art, New York, the Moderna Museet in Stockholm and the Cleveland Museum of Art, Ohio.</p>
<p class="link"><i class="fa fa-book" aria-hidden="true"></i>内容はAmazonより引用しました。<a href="https://www.amazon.co.jp/Jockum-Nordstrom-Learned-Forgotten-appris/dp/3775735828/ref=pd_rhf_gw_p_img_3?ie=UTF8&psc=1&refRID=09JSJY0XA70V9HW8PJDT">詳細はこちらから。</a></p>
</div>
</div><!--.book_wrapper-->
<a href="http://sanko333.webcrow.jp/0707_MugenScroll_book/book2_PeterDoig/index.html" id="next">next</a>
</div><!--/#container-->


<script src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/jquery.clever-infinite-scroll.js"></script>
<script>
		$('#container').cleverInfiniteScroll({
			contentsWrapperSelector: '#container',
			contentSelector: '.book_wrapper',
			nextSelector: '#next',
		});
	</script>
</body>
</html>

@charset "UTF-8";
/* CSS Document */
/* reset */
html, body, div, h1, p, ul, ol, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
  	YuGothic, '游ゴシック',
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol { list-style: none; /* マーカーを消す */ }
a { text-decoration: none; /* 下線を消す */ }
img, input {
  border: 0;
  vertical-align: bottom; /*画像の下の隙間をなくす*/
}
/*body {
	overflow-y: scroll;
}*/
/*********************************/
h1 {
	width: 100px;
	line-height: 100px;
	margin: 30px auto 0;
	font-size: 18px;
	color: #3A3A3A;
	text-align: center;
	border: 2px solid #B7B7B7; 
	border-radius: 50%;
}
.book_wrapper {
	width: 800px;
	margin: 0 auto 30px;
	overflow: hidden;
}
.book_wrapper img {
	float: left;
	max-width: 320px;
	padding: 40px;
}
.book_wrapper h2 {
	width: 400px;
	margin-bottom: 16px;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	letter-spacing: 0.02em;
	float: right;
	font-family: "PT Serif", serif;
}
#text p {
	width: 400px;
	font-size: 14px;
	line-height: 2;
	float: right;
}
.link { margin-top: 16px; }
.link a { text-decoration: underline; }
.fa { margin-right: 8px; color: #8F7B7B; }
#next {
	width: 100%;
	text-align: center;
}
/****** タブレット ******/
@media screen and (max-width:768px) {
.book_wrapper {
	width: 100%;
	margin: 0 auto;
}
.img_wrapper {
	width: 100%;
	float: none;
	max-width: 320px;
	margin: 0 auto;
	background: #98ECDB;
}
.book_wrapper img {
	text-align: center;
	padding: 10px 0 30px;
}
.book_wrapper h2 {
	width: 80%;
	margin: 16px auto;
	float: none;
}
#text p {
	clear: both;
	width: 80%;
	margin: 0 auto;
	float: none;
}
}