magento 手机自适应 瀑布流 混合样式

<!-- weicot.com 0.1.1 -->
<style>
        img { border:0; }
        div.wrap {
            width:100%;
            margin:0 auto;
            overflow:hidden;
            position:relative; 
            background:#FAFAFA;
            }
        div.wrap div {
            float:left;
            padding:0px;
            width: 253px;
            }
            
        div.wrap div img {
           width: 100%;
            height:227px;
            background-size:198px 198px;
            background-img:url("/skin/frontend/aw_mobile2/iphone/images/loading.svg");
            }

        div.wrap div p { 
        padding:5px; 
        line-height:20px; 
        background: #eef2f5; 
        margin:0 auto;
        text-align:center;
        font-size:14px;
        font-weight:600;
        color:#22c064;
        display:block;
        }
        div.wrap div span { 
        display:block;
        }
         div.wrap div span button{
         width:50%;
         height:30px;
         marging:0 auto;
         float:left;
         }
       
       
        </style>
        <script>
        window.onload = function() {
                waterFall("wrap")
        }//
        window.onresize = function() {
                waterFall("wrap")
        }
        function waterFall(element,space,children) {
                if(!element) return ;
                space = space || 20 ;
                children = children || "div" ;        //前三行默认设置，分别为外框元素id，上下留白，子元素标签名(子元素标签名使用太多或出错)
                var wrap = document.getElementById(element) ;
                var water = wrap.getElementsByTagName(children) ;
                var spaceWidth = water[0].offsetWidth ;        //获取子元素宽度(offsetWidth会获取块级元素的padding和border)
                var wrapWidth = wrap.offsetWidth ;        //获取外框元素宽度
                var colNum = Math.floor(wrapWidth/spaceWidth) ;        //计算获取外框元素所能承受列数
                var padding = Math.floor((wrapWidth - colNum*spaceWidth)/(colNum+1)) ;        //计算外框元素剩余宽度并计算左右留白
                var column = new Array() ;
                var length = water.length ;
                var maxHeight = 0 ;
                for(var i=0;i<colNum;i++) {        //初始化数组来计算各列初始top值和left值
                        column[i] = new Array() ;
                        column[i].top = space ;
                        column[i].left = (spaceWidth * i)+padding*(i+1) ;        //计算各列距离左侧距离
                }
                for(var i=0;i<length;i++) {        //遍历所有子元素及瀑布流布局
                        var index = i+1 ;        //计算该子元素属于第几列
                        if(index%colNum==0) {
                                sub = colNum ;
                        } else {
                                sub = index%colNum ;
                        }
                        _this = water ;
                        _this[i].style.position = "absolute" ;
                        _this[i].style.top = column[sub-1].top + "px" ;
                        _this[i].style.left = column[sub-1].left + "px" ;
                        column[sub-1].top += _this[i].offsetHeight + space ;        //计算各列最新高度以便赋值
                }
                for(var i=0;i<colNum;i++) {        //获取瀑布流整体布局高度
                        if(column[i].top > maxHeight) maxHeight = column[i].top ;
                }
                wrap.style.height = maxHeight+"px" ;        //给外框元素赋值以防止出现子元素溢出外框元素
        }
        //希望能帮助到大家哈，我一开始使用的事Jquery，但是考虑瀑布流比较消耗浏览器内存，就改成原生javascript了，滚动到浏览器底部ajax取值做瀑布流也灭做，等到项目到了再说吧
        </script>
        
        <?php //if (($_products = $this->getProductCollection()) && $_products->getSize()): ?>
        <!--<div class="related-products__list wrap " id="wrap">-->
        <?php //foreach($_products as $_item): ?>    
        <?php if (($_products = $this->getProductCollection()) && $_collectionSize = $_products->getSize()): ?>
        <div class="related-products__list wrap " id="wrap">
        <?php foreach ($_products->getItems() as $_item): ?>
    
    
    
    
                <div  class="box">
                    
                        
        <a onclick="setLocation(‘<?php echo $_item->getProductUrl() ?>‘)" title="">
                        <img src="<?php echo $this->helper(‘catalog/image‘)->init($_item, ‘small_image‘)->resize(198); ?>" alt="<?php echo $this->htmlEscape($_item->getName());?>" />                    
                        </a>                 
                         
       <p><?php 
    echo strip_tags($this->getPriceHtml($_item, true, ‘-related‘)); ?>
       </p>
     
       <span>
       <button type="button" title="<?php echo $this->__(‘Add to Cart‘) ?>" class="button btn-cart btn-round-s" onclick="setLocation(‘<?php echo $this->getAddToCartUrl($_item) ?>‘)"><span><span><?php echo $this->__(‘Add to Cart‘) ?></span></span></button>
       
      <button type="button" title="Add to Compare" class="button btn-cart btn-round-s">
      
      <?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
                            <a href="<?php echo $_compareUrl ?>"><span style="color: #007aff;">To Compare</span></a>
                     <?php endif; ?>                
      
      
      
      
      </button>
       </span>
       
       </div>
               
               <?php endforeach ?>
        </div>
<?php endif; ?>
</div>