jQuery滝のレイアウトを実現
6480 ワード
コア構想:配列で各列liの高さにアクセスし、liを追加するたびに最小高さの列に追加し、liを追加するたびにその高さを最小高さに追加する
<style>
*<span style="color: #000000;"> {
margin: </span>0<span style="color: #000000;">;
padding: </span>0<span style="color: #000000;">;
list</span>-<span style="color: #000000;">style: none;
}
ul {
margin: </span>0<span style="color: #000000;"> auto;
position: relative;
}
ul li {
width: 300px;
position: absolute;
}
ul li img {
width: </span>100%<span style="color: #000000;">;
}
</span></style>
</code></pre><ul/>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"/>
<script><span style="color: #000000;">
$.ajax({</span><span style="color: #008000;">//</span><span style="color: #008000;"> </span>
url: 'http://rap2.taobao.org:38080/app/mock/257210/json',<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
dataType: 'JSON'<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
}).done(a => {<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
a =<span style="color: #000000;"> a.data
const teep </span>= 10,<span style="color: #008000;">//</span><span style="color: #008000;"> li </span>
width = 300,<span style="color: #008000;">//</span><span style="color: #008000;"> li ， </span>
cols = Math.floor(($(document).innerWidth()) / (width + teep)),<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
list = $('ul')[0].children,<span style="color: #008000;">//</span><span style="color: #008000;"> ul </span>
hh = [] <span style="color: #008000;">//</span><span style="color: #008000;"> </span>
let num = 0<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
$('ul').css('width', cols * (width + teep))<span style="color: #008000;">//</span><span style="color: #008000;"> ul </span>
$(a).each((index, item) => { <span style="color: #008000;">//</span><span style="color: #008000;"> </span>
$('<li>').html(`<img src="${item.src}">`).appendTo('ul')<span style="color: #008000;">//</span><span style="color: #008000;"> li</span>
<span style="color: #000000;"> })
$(list).find(</span>'img').on('load', <span style="color: #0000ff;">function</span>() {<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
num++<span style="color: #008000;">//</span><span style="color: #008000;"> 1</span>
<span style="color: #0000ff;">if</span>(num==$(list).length){<span style="color: #008000;">//</span><span style="color: #008000;"> ， li </span>
$(list).each((index,item)=>{<span style="color: #008000;">//</span><span style="color: #008000;"> li</span>
<span style="color: #0000ff;">if</span> (index < cols) {<span style="color: #008000;">//</span><span style="color: #008000;"> li </span>
<span style="color: #000000;"> $(list).eq(index).css({
left: (width </span>+ teep) *<span style="color: #000000;"> index,
top: teep
})
hh.push($(list).eq(index).height() </span>+ teep*2)<span style="color: #008000;">//</span><span style="color: #008000;"> li hh</span>
} <span style="color: #0000ff;">else</span> {<span style="color: #008000;">//</span><span style="color: #008000;"> li </span>
let minHeight = Math.min(...hh)<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
let minIndex = hh.indexOf(minHeight)<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #000000;"> $(list).eq(index).css({
left: (width </span>+ teep) *<span style="color: #000000;"> minIndex,
top: minHeight
})
hh[minIndex]</span>+=$(list).eq(index).height()+teep<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #000000;"> }
})
}
})
})
</span></script>
</div>
<p> </p>
</div>
</div>
</div>