Question

这是我的困境我有两个观点在切换时工作得很好我有同位素和砌体视图，这很好用的挑战是让砌体视图根据视图端口重新调整某些图像大小，我使用了下面的代码。

$(function(){

  var $container = $('#container');
  // add randomize the size of images on the selected class//
  $container.find('.element').each(function(){
    var $this = $(this),
        number = parseInt( $this.find('.number').text(), 10);           

    if (number  % 1 === 0 ){$this.addClass('width2');}

        if (window.matchMedia("(max-width: 599px)").matches) { 
            if ( number   % 5 === 3) {
                $this.addClass('height2');}
            }
        if (window.matchMedia("(min-width: 600px) and (max-width:1023px)").matches) { 
            if ( number %12   % 5 === 2) {
                $this.addClass('height2');}
            }
        if (window.matchMedia("(min-width: 1024px)").matches) { 
            if ( number %10   % 10 === 5)  {
                $this.addClass('height2');}                 
            }
    });

我通过使用下面的

为一个元素分配一个数字来完成这项工作

var $l = document.getElementsByClassName("number");
        for(i=0; i < 40; i++){ $l[i].innerHTML = i + 1;}

这会将数字广告到类“数字”，我使用顶部代码返回该数字，我使用模数为返回的数字分配一个类。

所有这一切都运行正常，如果我在我的代码中打开给定大小的浏览器窗口，该类被添加到指定的数字范围，现在我的问题是我必须使这个工作在窗口重新大小这是哪里我被卡住了，是否有更简单的方法来完成我想要做的事情或任何提示将不胜感激。

这里有一些HTML代码

<div id="container">
    <div class="element item audio hd phone">
        <p class="number"></p>
        <div class="element_holder bar">
            <div class="thumb">
                <div class="p-darkblue status opacity">
                    <i class="fa fa-comments"></i> Available
                    <div class="modelfeatures">
                        <span><i class="fa fa-volume-up"></i></span>
                        <span data-cat="hd" class="hd">HD</span>
                        <span><i class="fa fa-mobile"></i></span>
                    </div>
                </div>
                <!-- hover over effect on masonary view -->
                <div class="overlay1">
                    <div class="p-darkblue col-lg-12 opacity">
                        <i class="fa fa-comments"></i>Available
                        <div class="modelfeatures">
                            <span><i class="fa fa-volume-up"></i></span>
                            <span class="hd">HD</span>
                            <span><i class="fa fa-mobile"></i></span>
                        </div>
                        <div class="model_name">kinkykat</div>
                        <div class="rating rating_margin">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-half-full"></i>
                        </div>
                    </div>
                </div>
                <!-- end of overlay -->
                <img class="backdrop" src="image source" alt="Kikykat - Available">
                <div class="flame">
                    <div class="flame1"><i class="fa fa-fire"></i></div>
                    <div class="flame2"><i class="fa fa-firefox"></i></div>
                    <div class="flame3"><i class="fa fa-fire"></i></div>
                </div>
            </div>
        </div>

Answer 1

在阅读了一些有关同位素的文献后，发现了以下解决方案

Integer.class

问题是未设置的排水沟。：（'

使用同位素砌体视图在窗口重新调整大小

1 个答案: