瀑布流图片自动式 masonry
2024-08-26 11:21:50
<script type="text/javascript" src="<?php echo FRONT_PUBLIC;?>js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="<?php echo FRONT_PUBLIC;?>js/jquery.masonry.min.js"></script>
<style>
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width: 420px;
}
.box img {
max-width: 100%
}
</style>
<div id="masonry" class="container-fluid">
<?php foreach($fl_images as $image):?>
<?php if($image->fl_img):?>
<div class="box"><img src="<?php echo $image->fl_img;?>"></div>
<?php endif;?>
<?php endforeach;?>
</div> <script>
$(function(){
var $container = $('#masonry');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box',
gutterWidth : 20,
isAnimated: true,
});
});
});
</script>
最新文章
- 你必须收藏的Github技巧
- *HDU3357 判环
- chattr和lsattr
- 3D Math Library的姿势
- Oracle Insert 多行(转)
- Debian 7.4 中配置PHP环境
- Codeigniter数据库操作
- .NET中的CSV导入导出(实例)
- linux基础--chkconfig 详解
- JavaScript的基本规范
- IDEA+PHP+XDebug调试配置
- WebApi生成在线API文档--Swagger
- 在Pythonfor循环中如何获取循环次数?
- git 从远程仓库获取所有分支
- JMeter中的正则表达式的匹配
- ViewModel处理View相关事件的多种方式(非技术贴,仅学习总结)
- Spring Boot 之订制 logo
- 泡泡一分钟:Motion Planning for a Small Aerobatic Fixed-Wing Unmanned Aerial Vehicle
- 3-idiots hdu4609 母函数+FFT 组合数学题
- MySQL LOCK TABLES 与UNLOCK TABLES