HTML - 사진목록
<html>
<head>
<title>사진목록</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&family=Sunflower:wght@300&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="common.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#photos {
overflow: hidden;
width : 900px;
margin: 0px auto ;
}
.box{
width:195px;
float:left;
border: 4px solid #F3A950;
margin: 5px;
padding: 5px;
text-align: center;
font-weight: bold;
border-radius: 10px;
margin-top: 10px;
}
.title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
button:disabled {background: gray;}
</style>
</head>
<body>
<div id="page">
<div id ="top"
style="border-bottom: 2px solid #F3A950;">
<h1>사진목록</h1>
</div>
<div id = "center"></div>
<div id ="photos" style="color: #F3A950;"></div>
<div id ="buttons">
<button id ="prev">◀</button>
<span id ="curpage" style ="color: white;">1</span>
<button id="next">▶</button>
<input type ="text" id="inpage" placeholder="페이지">
</div>
<div id ="bottom">
<h5>CopyRight 2022. 강깸 All Right Reserved.</h5>
</div>
</div>
</body>
<script>
let curpage=1;
let perPageNum=12;
let lastPage = Math.ceil(5000/perPageNum);
getList();
$("#inpage").on("keydown", function(e){
if(e.keyCode==13){
if(lastPage < $("#inpage").val()){
alert("마지막페이지보다 큽니다.")
}else {
curpage=$("#inpage").val();
getList();
}
}
})
//다음버튼클릭한 경우
$("#next").on("click", function(){
curpage++;
getList();
});
//이전버튼클릭한 경우
$("#prev").on("click", function(){
curpage--;
getList();
});
//사진목록 불러오기
function getList(){
$.ajax({
type: "get",
dataType: "json",
url: "https://jsonplaceholder.typicode.com/photos",
success: function(data){
let str="";
$(data).each(function(){
let id=this.id;
let title=this.title;
let img=this.thumbnailUrl;
let start=(curpage-1)*perPageNum+1;
let end=(curpage*perPageNum);
if(id >= start && id <= end){
str += "<div class='box'>";
str += "<img src='" + img + "'>";
str += "<div class='title'>"+id+":"+title+"</div>";
str += "</div>";
}
});
$("#photos").html(str);
$("#curpage").html(curpage + "/" + lastPage);
if(curpage==1){
$("#prev").attr("disabled", true);
}else{
$("#prev").attr("disabled", false);
}
if(curpage==lastPage){
$("#next").attr("disabled", true);
}else{
$("#next").attr("disabled", false);
}
}
});
}
</script>
</html>
다음버튼옆에 페이지 이동 text 를 넣어서 쉽게 페이지이동을 할수있다. 범위 밖을 벗어난 페이지를 입력하면 경고창이뜨면서 실행하지않는다. class box 를 줘서 사진 들을 각각 나눴다. style에 박스스타일을 줬다.
쇼핑몰 같은 곳에서 자주쓰는 스타일이다.
댓글남기기