자기가 JQuery로 폭포수 하나 써요.
26472 단어 JavaScriptjquery폭포수
전언
이번 달은 줄곧 일하느라 바쁘다.새로운 지식을 배울 기회가 줄곧 없었다.엊그저께 갑자기 폭포류 코드를 쓰고 싶었어요.폭포류 코드를 찾지 못한 것은 아니다.내가 머리를 좀 익히고 싶어서 그래.우선, 먼저 생각을 고려한다.모든 그림은 부모 디렉터리에 대한 포지셔닝 방식을 사용합니다.그리고
jQuery로 그것이 어디에 배열되어야 하는지 찾아라.결국 폭포류의 효과를 거두었다.아무리 생각해도 소용없다.시작하다.html 프레임 구축
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> jquery </title>
<link rel="stylesheet" href="style/style.css">
<script src="js/jquery/jquery.js"></script>
<script src="js/FengWaterFall.beta2.js"></script>
</head>
<body>
<h1 class="tc cf"> jquery </h1>
<section id="waterfall">
<ul class="piclist">
<li><img src="image/1.jpg" alt=""><span> 1</span></li>
<li><img src="image/2.jpg" alt=""><span> 2</span></li>
<li><img src="image/3.jpg" alt=""><span> 3</span></li>
<li><img src="image/4.jpg" alt=""><span> 4</span></li>
<li><img src="image/5.jpg" alt=""><span> 5</span></li>
<li><img src="image/6.jpg" alt=""><span> 6</span></li>
<li><img src="image/7.jpg" alt=""><span> 7</span></li>
<li><img src="image/8.jpg" alt=""><span> 8</span></li>
<li><img src="image/9.jpg" alt=""><span> 9</span></li>
<li><img src="image/10.jpg" alt=""><span> 10</span></li>
<li><img src="image/1.jpg" alt=""><span> 1</span></li>
<li><img src="image/2.jpg" alt=""><span> 2</span></li>
<li><img src="image/3.jpg" alt=""><span> 3</span></li>
<li><img src="image/4.jpg" alt=""><span> 4</span></li>
<li><img src="image/5.jpg" alt=""><span> 5</span></li>
<li><img src="image/6.jpg" alt=""><span> 6</span></li>
<li><img src="image/7.jpg" alt=""><span> 7</span></li>
<li><img src="image/8.jpg" alt=""><span> 8</span></li>
<li><img src="image/9.jpg" alt=""><span> 9</span></li>
<li><img src="image/10.jpg" alt=""><span> 10</span></li>
</ul>
</section>
</body>
</html>SCSS 코드
@charset "UTF-8";
@import "reset.scss";
.piclist {
margin: auto;position: relative;
li {width: 180px;padding: 10px;border-radius: 5px;box-shadow: 0 0 4px #ddd;position: absolute;}
img {display: block;width: 180px;}
span {display: block;text-align: center;height: 26px;overflow: hidden;line-height: 26px;}
}reser 정보.scss 초기 파일.사실 안에는 아무것도 없다. 단지 기본 스타일을 지울 뿐이다.여러분이 흥미가 있으면 제가 전에 쓴 박문을 보십시오.http://blog.csdn.net/fungleo/article/details/48027493페이지 너비를 100%로 설정
$WinWitdh:100%; jquery 실전 1라운드
/* FengWaterFall.beta1.js 。 。 ， ， 。 2015 10 15 15:07:03 */
$(function(){
var Obj = $("#waterfall"),
Ul = Obj.children('ul'),
Li = Ul.children('li');
waterfall();
$(window).resize(function(event) {
waterfall();
});
function waterfall(){
var WinW = $(window).width();
var Blank = 20, //
LiW = 200+Blank, //
LiCol = parseInt(WinW/LiW), // ，
UlW = LiCol*LiW-Blank; // ， （ ）
Ul.width(UlW);
Li.each(function(i, e){
var T = $(this),
TCol = i%LiCol, //
TRow = parseInt(i/LiCol); // ， ，
/* ， ， ， 。 */
var PrevLi = Li.eq(i-LiCol),
PrevLiSize = PrevLi.innerHeight()+PrevLi.position().top+Blank;
TRow==0 ? Ttop = 0 : Ttop = PrevLiSize+'px';
var Tleft = TCol*LiW+'px';
T.css({
top: Ttop,
left: Tleft
});
});
}
})첫 번째 방법을 실현한 후 미리보기 효과를 통해 알고리즘이 좋지 않은 것 같다.그래서 2판을 그리기 시작했다.
jquery 실전 2라운드
/* FengWaterFall.beta2.js 。 for 。 */
$(function(){
var Obj = $("#waterfall"),
Ul = Obj.children('ul'),
Li = Ul.children('li');
waterfall();
$(window).resize(function(event) {
waterfall();
});
function waterfall(){
var WinW = $(window).width();
var Blank = 20, //
LiW = 200+Blank, //
LiCol = parseInt(WinW/LiW), // ，
UlW = LiCol*LiW-Blank; // ， （ ）
Ul.width(UlW);
var AllLi = []; //
Li.each(function(index, e){
var T = $(this);
if (index<LiCol) { //
AllLi[index] = T.outerHeight(); // ，
T.css({
top: 0,
left: LiW*index+'px'
});
} else{
var MinH = Math.min.apply(null,AllLi); // ， （ ）
// for
for (var i = 0; i < AllLi.length; i++) {
if (AllLi[i] == MinH) {
var MinI = i;
};
};
var ThisH = T.outerHeight()+Blank; //
AllLi[MinI] = parseInt(MinH+ThisH); //
T.css({
top: MinH+Blank+'px',
left: LiW*MinI+'px'
});
};
});
// console.log(AllLi)
}
})두 번째 방법의 논리는 완전히 정확하다.실현 효과도 완벽하다.하지만 for 순환이 이상해요.jquery란 말이야, jquery의 방법으로 이루어져야 해.
jquery 실전 3라운드
/* FengWaterFall.beta3.js 。jquery each 。 。 */
$(function(){
var Obj = $("#waterfall"),
Ul = Obj.children('ul'),
Li = Ul.children('li');
waterfall();
$(window).resize(function(event) {
waterfall();
});
function waterfall(){
var WinW = $(window).width();
var Blank = 20, //
LiW = 200+Blank, //
LiCol = parseInt(WinW/LiW), // ，
UlW = LiCol*LiW-Blank; // ， （ ）
Ul.width(UlW);
var AllLi = []; //
Li.each(function(index, e){
var T = $(this);
if (index<LiCol) { //
AllLi[index] = T.outerHeight(); // ，
T.css({
top: 0,
left: LiW*index+'px'
});
} else{
var MinH = Math.min.apply(null,AllLi); // ， （ ）
// each ，
$.each(AllLi,function(index,value){
if (value == MinH) {
MinI = index; // var ，
};
});
var ThisH = T.outerHeight()+Blank; //
AllLi[MinI] = parseInt(MinH+ThisH); //
T.css({
top: MinH+Blank+'px',
left: LiW*MinI+'px'
});
};
});
// console.log(AllLi)
}
})총결산
이때 나는 다른 사람이 어떻게 썼는지 보러 갔다.결과적으로 전체적인 사고방식이 똑같다는 것을 발견하였다.그러나 색인을 찾는 방법은 내가 for나 each로 순환하는 것보다 훨씬 간단하고 믿을 만하다.근데 도대체 어떻게 작동하는지 아직 모르겠어요.그래서 짐꾼은 안 해요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
