每日一讲：masonry响应式页面布局(5)---动态添加、删除item

动态添加砖块(item)

masonry理论上支持在容器的任意位置动态添加砖块，但是根据位置的不同实现的方法也是不一样的。由上文讲到的methods中可以找到能够实现添加的method：appended和reload。这俩个方法本质上并不是专门用于添加的方法，而是布局方法，所以在调用这俩个方法前，必须先将要添加的砖块拼接到容器中，在调用appended或reload进行定位或布局。例如，可以使用jquery的如下方法进行拼接：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

由于appended方法内部是通过调用layout方法实现定位或布局的，所以使用 appended添加元素只能添加到容器的尾部(无论你把砖块拼接到什么地方)。而reload方法实际是用于重新定位或布局的，所以使用reload添加可以添加到容器的任意位置。但是这俩个效率是有明显区别的，如果只是添加到容器尾部还是首选appended方法。

砖块样式定义：

<style type="text/css">
.box {
  width: 120px;
  margin:5px;
  float: left;
  background:#D8D5D2;
}
</style>

1.尾部添加

先通过jquery的append方法将待添加的砖块拼接到容器尾部，在使用appended方法进行定位或布局。注：无论将待添加的砖块拼接到容器的任意位置，appended方法最后定位或布局时都是定位到容器尾部。

<a href="javascript:void(0)"  onClick="appended_()">尾部添加</a><br/>
<div id="container">
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
</div>

<script type="text/javascript">
    $('#container').masonry({
          itemSelector : '.box',
          columnWidth : 130
       });
    function appended_(){
	    var $boxes = $('<div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.新的</p></div>');
        $('#container').append( $boxes ).masonry( 'appended', $boxes );
	}
</script>

2.头部添加

必须使用jquery的prepend方法将待添加的砖块拼接到容器顶部，在调用reload方法。

<a href="javascript:void(0)"  onClick="appended_()">头部添加</a><br/>
<div id="container">
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
</div>

<script type="text/javascript">
    $('#container').masonry({
          itemSelector : '.box',
          columnWidth : 130
       });
    function appended_(){
	    var $boxes = $('<div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.新的</p></div>');
        $('#container').prepend( $boxes ).masonry( 'reload');
	}
</script>

3.任意位置

和上面例子原理一样，使用reload方法

<a href="javascript:void(0)"  onClick="appended_()">任意位置添加</a><br/>
<div id="container">
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box" id="brick6"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
</div>

<script type="text/javascript">
    $('#container').masonry({
          itemSelector : '.box',
          columnWidth : 130
       });
    function appended_(){
	    var $boxes = $('<div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.新的</p></div>');
        $('#brick6').after( $boxes );
		$('#container').masonry( 'reload');
	}
</script>

移除砖块

对于移除指定的砖块masonry提供了remove方法，当由于该方法移除后并不会自动重新布局，如果想重新布局还需借助reload方法，所以使用masonry提供的remove方法和使用jquery等工具的remove方法机械的移除区别不大。

<a href="javascript:void(0)"  onClick="remove_()">移除砖块</a><br/>
<div id="container">
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box" id="brick6"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.666</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
</div>

<script type="text/javascript">
    $('#container').masonry({
          itemSelector : '.box',
          columnWidth : 130
       });
    function remove_(){
	   $('#container').masonry( 'remove',$('#brick6'));
	   //$('#container').masonry( 'reload');
	}
</script>

+友情链接