Jquery简单瀑布流代码示例. 仿开心网,蘑菇街

时间:2022-05-26 11:49:25
最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,仿开心网做一个瀑布流示例。 

需要用到Jquery,jquery.masonry.min.js 
演示地址:http://www.yiwugou.com/sdialbum/list_1.html


JQuery代码:

<script type="text/javascript" language="javascript" src="http://www.yiwugou.com/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="http://www.yiwugou.com/js/jquery.masonry.min.js"></script>

<script>  
 $(function(){  
var $container = $('.news_img_listbold');  
$container.imagesLoaded( function(){  
 $container.masonry({  
itemSelector : 'ul'  
 });  
});  
 });  
</script>   


CSS:

/* font size -字体大小 */
.font10px {font-size:10px;}
.font11px {font-size:11px;}
.font12px {font-size:12px;}
.font13px {font-size:13px;}
.font14px {font-size:14px;}
.font15px {font-size:15px;}
.font16px {font-size:16px;}
.font18px {font-size:18px;}
.font20px {font-size:20px;}
.font22px {font-size:22px;}
.font24px {font-size:24px;}
.font32px {font-size:32px;}
.fontbold {font-weight:700;}
.font400 {font-weight:400;}
.fontnormal{ font-weight:normal!important;}


/* font color -字体颜色 */
.fontblack {color:#000;}
.fontred {color:#f00;}
.fontblue {color:#09f!important;}
.fontblue_line {color:#09f!important;text-decoration:underline!important;}
.font_line{text-decoration:underline!important;}
.fontgreen {color:#3e8f40;}
.fontyellow {color:#ff5500;}
.fontfff {color:#fff;}
.font999 {color:#999;}
.font666 {color:#666;}
.font333 {color:#333!important;}
.fontccc {color:#ccc;}
.fonte5e5e5 {color:#e5e5e5;}
.fontff0 {color:#ff0;}
.font6c6c6c {color:#6c6c6c;}
.fontdfdfdf {color:#dfdfdf;}
.fontd2d2d2{color:#D2D2D2;}
.font7f{color:#7f7f7f;}
.fontca1f00 {color:#ca1f00;}
.fontca1f00 a:link,.fontca1f00 a:visited,.fontca1f00 a:hover {color:#ca1f00; text-decoration:none}
.fontyellow a:link,.fontyellow a:visited,.fontyellow a:hover {color:#ff7b00; text-decoration:none}
.fontblue a:link,.fontblue a:visited,.fontblue a:hover {color:#09f; text-decoration:none}
.fontbluelink a:link,.fontbluelink a:visited {color:#006aaa; text-decoration:none}
.fontbluelink a:hover {color:#006aaa; text-decoration:underline}
.fontblueline a:link,.fontblueline a:visited,.fontblueline a:hover {color:#006aaa; text-decoration:underline;}
.font999 a{color:#999;}
.fontyellow a{color:#ff5500;}
.font375e85 {color:#375e85}




/* line heihgt -文本行间距 */
.lineheight180 {line-height:180%;}
.lineheight200 {line-height:200%;}
.lineheight220 {
line-height:230%;
line-height:normal;
text-align: left;
}
.lineheight240 {line-height:240%;}
.lineheight260 {line-height:260%;}
.lineheight29{line-height:29px;}


/* margin -版块间距 */
.mt5px {margin-top:5px;}
.mt8px {margin-top:8px;}
.mt10px {margin-top:10px;}
.mt12px {margin-top:12px;}
.mt15px {margin-top:15px;}
.mt20px {margin-top:20px;}
.mt30px {margin-top:30px;}
.mb10px{margin-bottom:10px;}
.mr15px{margin-right:15px;}
.ml5px{margin-left:5px;display:inline;}
.ml7px{margin-left:7px;display:inline;}
.ml10px{margin-left:10px;display:inline;}
.ml12px{margin-left:12px;display:inline;}
.ml15px{margin-left:15px;display:inline;}

.news_img_listbold ul {width:223px;border:1px solid #d9d9d9;float:left;padding:6px;margin:5px 2px; top:auto;}

其它是我一些公共样式,我就不多写了,


html代码:

    <div class="news_img_listbold">
    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img0256.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>
    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img4785.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>


    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img0256.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>
    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img4785.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>
        
    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img0256.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>
    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img4785.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>
        
        
    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img0256.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>
    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img4785.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>


    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img4785.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>
        
        
    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img0256.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>
    <ul>
        <li><a href="#" title="dgasdg" target="_blank"><img src="../images/img4785.jpg" width="220"></a></li>
        <li class="mt5px"><span class="fontbold font14px fontwid120"><a href="#" title="dgasdg" target="_blank">义乌热销时尚手拿包</a></span> <span class="fontyellow">评论(100)</span></li>
        <li class="mt20px"><span class="left"><img src="../images/news_img_ico02.jpg" width="58" height="24"></span> <span class="fontpj120 fontyellow fontbold">45</span> </li>
            <div class="clr"></div>
        <li class="mt15px"><span class="font666">四大皆空:</span>包包质量很好。</li>
        </ul>             
    </div>