Jquery简单瀑布流代码示例. 仿开心网,蘑菇街
来源：互联网 发布：java模拟qq登录 编辑：程序博客网 时间：2024/05/16 05:40
需要用到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>
- Jquery简单瀑布流代码示例. 仿开心网,蘑菇街
- android 瀑布流效果(仿蘑菇街)
- android 瀑布流效果(仿蘑菇街)
- android 瀑布流效果(仿蘑菇街)
- android 瀑布流效果(仿蘑菇街)
- android 瀑布流效果(仿蘑菇街)
- android 瀑布流效果(仿蘑菇街)
- android 瀑布流效果(仿蘑菇街) .
- android 瀑布流效果(仿蘑菇街)
- android 瀑布流效果(仿蘑菇街)
- android 瀑布流效果(仿蘑菇街)
- android 瀑布流效果(仿蘑菇街)
- android瀑布流效果（仿蘑菇街）
- android瀑布流效果（仿蘑菇街）
- android瀑布流效果（仿蘑菇街）
- JQUERY仿蘑菇街布局
- 仿淘宝/蘑菇街形式，瀑布流效果 -- 固定列数
- Android 仿蘑菇街列表弹出和瀑布流 （ScrollView+RelativeLayout实现）
- 处理的两个bug
- android中的主题Theme
- SAP SD销售与分销
- IplImage, CvMat, Mat 的关系
- 使用java JDBC方式操作oracle blob类型数据
- Jquery简单瀑布流代码示例. 仿开心网,蘑菇街
- error C2143:语法错误 : 缺少“;”(在“类型”的前面)的解决方案
- 添加自定义标题栏
- psycopg2 momoko ImportError: libpq.so.5:
- SAP MM物料管理
- ibatis映射类型异常
- 我国农村人均收入增长将连续三年超GDP增长幅度
- SAP PP生产计划
- 诠释Android ContentProvider
