看看这个例子:https://www.airbnb.com/ 我有一个看起来像这样的项目列表:
<ul id="list2">
<li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-with-350-300.jpg" alt="Home " title="Home ">
<a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality">Lorem ipsum dolor sit amet aaaaa</a></li>
<li class="_column large"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W720xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(1)-720-300.jpg" alt="Home " title="Home ">
<a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-1">Lorem ipsum dolor sit amet2</a></li>
<li class="_column large"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W720xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(2)-720-300.jpg" alt="Home " title="Home ">
<a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-2">Lorem ipsum dolor sit amet3</a></li>
<li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(6)-350-300.jpg" alt="Home " title="Home ">
<a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-6">Lorem ipsum dolor sit amet2</a></li><li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(3)-350-300.jpg" alt="Home " title="Home ">
<a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-3">Lorem ipsum dolor sit amet4</a></li>
<li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(5)-350-300.jpg" alt="Home " title="Home ">
<a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-5">Lorem ipsum dolor sit amet3</a></li>
<li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(7)-350-300.jpg" alt="Home " title="Home ">
<a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-7">Lorem ipsum dolor sit amet</a></li>
<li class="_column small"><img id="YB_random_with_img" src="/cms_charterwebsite/Images/CharterWebsite/W350xH300/Yacht-Charter-Brazil-Tropical-Coasts-combined-(4)-350-300.jpg" alt="Home " title="Home ">
<a href="/cms_charterwebsite/Yacht-Charter-Yacht-Charter-Brazil---Tropical-Coasts-combined-with-Easiness-and-Vitality-4">Lorem ipsum dolor sit amet4</a>
</li>
</ul>
和css:
.image-slider-wrapper #list2 li {
display: inline-block;
width: auto;
margin-right: 20px;
position: relative;
background: #626262;
margin-bottom: 20px;
}
jquery代码:
var summ = 0;
jQuery("#list2 li").each(function () {
if (jQuery(this).hasClass("large")) {
summ += 2;
}
else if (jQuery(this).hasClass("small")) {
summ++;
}
if (summ == 3) {
jQuery(this).css('margin-right', '0');
}
});
当我们有2张pic:1小和1大我们有一条线或当我们有3张小pic我们有另一条线。当项目是最后一行时,我想删除margin-right。怎么做?