图片响应式（数据绑定在标签上）

介绍 数据绑定到标签
data()的用法 : http://www.w3school.com.cn/jquery/data_jquery_data.asp

jquery each 函数的用法：http://www.w3school.com.cn/jquery/traversing_each.asp

 $(selector).each(function(index,element))

思路的具体扩展

• 现在div标签上绑定两个data-属性（如：data-img-sm="小图路径"，data-img-lg="大图路径"）

• 文档加载完毕时，监听屏幕尺寸的变化

• 获取屏幕的尺寸

• 先拿到图片所装的盒子的所有item

• 通过each遍历获取各个标签item

• 将各个标签item从js对象转换为jQ对象，方便后面使用data方法

• 通过判断是大图还是小图来获取图片的路径（使用data方法获取路径）
  var imgSrc = isSmImg ? $item.data('sm-img'):$item.data('lg-img');

• 如果是小图的时候，为了避免重叠干扰，先清空item中的节点
  $item.empty();

• 再创建img标签
  var img = $('');

• 再将其添加在父元素item上
  $item.prepend(img);

• 如果是大图的时候，先清空item中的节点，再设置背景图片
  var src = 'url("'+ imgUrl +'")';
  $item.css({
  backgroundImage:src
  });