problems occur when the animation ends?

[zjw666]

when I gave a padding or margin attribute to the 'li' elements, a problem occured. A 'li' element which is on the right jump to the next row when the animation ends. I guess that the reason may be the existence of the padding or margin attribute when the animation is over, which makes the right 'li' element jump to the next row. if I get rid of the padding or margin attribute, the pictures in 'li' display too close. So, I want to know how to solve the problem?
html

<div class="nav btn-group" id="classification">
    <button id="all" class="cur btn btn-default">All</button>
    <button id="boys" class="btn btn-default">Boys</button>
    <button id="girls" class="btn btn-default">Girls</button>
    <button id="masters" class="btn btn-default">Masters</button>
    <button id="doctors" class="btn btn-default">Doctors</button>
    <button id="li" class="btn btn-default">Li's students</button>
    <button id="wang" class="btn btn-default">Wang's students</button>
</div>
<ul id="list" class="source">
	<li data-id="id-1" class="boys masters wang">
		<a href="#">
			<img class="img-circle img-responsive" src="{% static 'images/1.jpg' %}" alt="zjw">
		</a>
		<span>zjw</span>
	</li>
	<li data-id="id-2" class="boys doctors wang">
		<a href="#">
			<img class="img-circle img-responsive" src="{% static 'images/2.jpg' %}" alt="wmh">
		</a>
		<span>wmh</span>
	</li>
	<li data-id="id-3" class="girls masters wang">
		<a href="#">
		       <img class="img-circle img-responsive" src="{% static 'images/3.jpg' %}" alt="gsm">
		</a>
		<span>gsm</span>
	</li>
	<li data-id="id-4" class="girls masters li">
		<a href="#">
			<img class="img-circle img-responsive" src="{% static 'images/4.jpg' %}" alt="hwa">
		</a>
		<span>hwa</span>
	</li>
	<li data-id="id-5" class="girls doctors li">
		<a href="#">
			<img class="img-circle img-responsive" src="{% static 'images/5.jpg' %}" alt="lxx">
		</a>
		<span>lxx</span>
	</li>
	<li data-id="id-6" class="boys masters li">
		<a href="#">
			<img class="img-circle img-responsive" src="{% static 'images/6.jpg' %}" alt="zs">
		</a>
		<span>zs</span>
	</li>
	<li data-id="id-7" class="boys doctors wang">
		<a href="#">
			<img class="img-circle img-responsive" src="{% static 'images/7.jpg' %}" alt="wxx">
		</a>
		<span>wxx</span>
	</li>
	<li data-id="id-8" class="boys doctors li">
		<a href="#">
			<img class="img-circle img-responsive" src="{% static 'images/8.jpg' %}" alt="zd">
		</a>
		<span>zd</span>
	</li>
	<li data-id="id-9" class="boys masters li">
		<a href="#">
			<img class="img-circle img-responsive" src="{% static 'images/9.jpg' %}" alt="wyl">
		</a>
		<span>wyl</span>
	</li>
	<li data-id="id-10" class="boys doctors wang">
		<a href="#">
			<img class="img-circle img-responsive" src="{% static 'images/10.jpg' %}" alt="zht">
		</a>
		<span>zht</span>
	</li>
</ul>

css

.source li{
	float:left;
	padding-bottom:10px;
}

.source li img{
	width:90px;
	height:90px;
	padding-right:10px;
}

.source li span{
	text-align:center;
	padding:10% 40%;
}

js

$data=$("#list").clone();
$('#classification button').click(function(){    //头像分类动画
	$(this).addClass("cur");
	$(this).siblings().removeClass("cur");
	var id=$(this).attr("id");
	if (id=="all") 
	{
		var $destination=$data.find("li");
	}else{
		var $destination=$data.find("li."+id);
	}
	$("#list").quicksand($destination,{
		duration:700
	});
	$("#list a").click(function(event){  //动画完成后需重新捆绑事件
		var img = $(this).children()[0];
		var name = img.alt;
		var url= img.src;
		$("#personal").stop(stopAll=false,goToEnd=true);
		$("#personal").css("opacity","0");
		$("#personal h2").text(name);
		$("#personal img").attr("src",url);
		$("#personal p").text(person_object[name]);
		$("#personal").animate({
			opacity:'1'
		},1000);
		event.preventDefault();
	});
});