类似百度图片搜索结果页的布局怎么实现

y681000 2014-06-21 08:54:36

请看链接

http://image.baidu.com/i?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1403354154527_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=汽车

在百度图片的搜索结果页面中
不管图片是大是小是竖还是横
都能在指定宽度中整齐的显示
请问这样的效果是怎么实现的

...全文

846 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

liy819 2016-09-20

打赏
举报

jquery.infinitescroll.js从下面的网址下载 http://actupload.pep.com.cn/masonry-docs/masonry.pkgd.min.js

liy819 2016-09-20

打赏
举报

用masonry这个js


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局展示</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<style>
.grid{width:500px;}
.grid-item {float:left;}
.grid-item img {width:100px;}
</style>
<script>
$(document).ready(function(){
	$('.grid').masonry({
	  itemSelector: '.grid-item',
	  columnWidth: 100
	});  
});
</script>
</head>
 
<body>
 <div class="grid">
  <div class="grid-item"><img src="images/pic/01.jpg" /></div>
  <div class="grid-item"><img src="images/pic/02.jpg" /></div>
  <div class="grid-item"><img src="images/pic/03.jpg" /></div>
  <div class="grid-item"><img src="images/pic/04.jpg" /></div>
  <div class="grid-item"><img src="images/pic/05.jpg" /></div>
  <div class="grid-item"><img src="images/pic/06.jpg" /></div>
  <div class="grid-item"><img src="images/pic/07.jpg" /></div>
  <div class="grid-item"><img src="images/pic/08.jpg" /></div>
  <div class="grid-item"><img src="images/pic/09.jpg" /></div>
  <div class="grid-item"><img src="images/pic/10.jpg" /></div>
  <div class="grid-item"><img src="images/pic/11.jpg" /></div>
  <div class="grid-item"><img src="images/pic/12.jpg" /></div>
  <div class="grid-item"><img src="images/pic/13.jpg" /></div>
  <div class="grid-item"><img src="images/pic/14.jpg" /></div>
  <div class="grid-item"><img src="images/pic/15.jpg" /></div>
  <div class="grid-item"><img src="images/pic/16.jpg" /></div>
  <div class="grid-item"><img src="images/pic/17.jpg" /></div>
  <div class="grid-item"><img src="images/pic/18.jpg" /></div>
  <div class="grid-item"><img src="images/pic/19.jpg" /></div>
  <div class="grid-item"><img src="images/pic/20.jpg" /></div>
</div>
 
</body>
</html>

y681000 2014-06-23