여러보기가있는 JQuery 동위 원소 표시 문제

jquery 동위 원소를 사용하여 웹 응용 프로그램을 작성 중이며 잘 모를 수있는 이상한 표시 동작이 나타납니다. 앱의 요지는 웹 서비스에서 일부 데이터를 다운로드하여 타일 기반 모드와 테이블 기반 모드 중 하나의 모드로 사용자에게 표시한다는 것입니다. 이 코드는 데이터를 별도의 div에 넣고 각각의 isotope()를 호출 한 다음 사용자가 클릭하는 일부 버튼을 기준으로 데이터를 숨기거나 표시합니다.여러보기가있는 JQuery 동위 원소 표시 문제

페이지의 크기를 조정할 때 문제가 발생합니다. 그렇게하면 현재 보이지 않는보기가 엉망이됩니다.

http://jsfiddle.net/jQ3v3/

이 단계 재현 :

이동을 jsfiddle 페이지
클릭 "표 모드"로 상단에 당신은 내가 여기 jsfiddle에서 아래로 증류 한 예를 볼 수 있습니다 권리. 타일을 테이블로 대체해야합니다.
렌더링 된 출력을 표시하는 jsfilddle 창을 이동하거나 브라우저 크기를 조절하면됩니다.
오른쪽 상단의 "타일 모드"를 클릭하십시오. 타일이 다시 나타나는 것을보아야하지만 왼쪽에서 오른쪽 방향으로가 아니라 서로 위에 겹쳐서 표시됩니다.
jsfiddle 또는 브라우저의 크기를 다시 조정하십시오. 타일은 적절한 위치로 이동합니다.
"표 모드"를 다시 클릭하십시오. 표의 행이 너무 짧고 모든 행이 표시되지는 않습니다.
브라우저 크기를 조정하면 문제가 해결됩니다.

실제로 나는 HTML 생성의 많은 부분을 처리하기 위해 밑줄 템플릿을 사용하고 있지만 jsfiddle 예제에서는 단지 html로만 하드 코딩되어 있습니다.

동위 원소의 인스턴스가 동시에 여러 개 실행되지 않습니까? 여기

코드입니다 :

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <style> 
     .isotope, 
     .isotope .isotope-item { 
      /* change duration value to whatever you like */ 
      -webkit-transition-duration: 0.5s; 
       -moz-transition-duration: 0.5s; 
       -ms-transition-duration: 0.5s; 
       -o-transition-duration: 0.5s; 
        transition-duration: 0.5s; 
     } 

     .isotope { 
      -webkit-transition-property: height, width; 
       -moz-transition-property: height, width; 
       -ms-transition-property: height, width; 
       -o-transition-property: height, width; 
        transition-property: height, width; 
     } 

     .isotope .isotope-item { 
      -webkit-transition-property: -webkit-transform, opacity; 
       -moz-transition-property: -moz-transform, opacity; 
       -ms-transition-property:  -ms-transform, opacity; 
       -o-transition-property:  -o-transform, opacity; 
        transition-property:   transform, opacity; 
     } 

     /**** disabling Isotope CSS3 transitions ****/ 

     .isotope.no-transition, 
     .isotope.no-transition .isotope-item, 
     .isotope .isotope-item.no-transition { 
      -webkit-transition-duration: 0s; 
       -moz-transition-duration: 0s; 
       -ms-transition-duration: 0s; 
       -o-transition-duration: 0s; 
        transition-duration: 0s; 
     } 
     </style> 

     <style> 
     div.controls { 
      height: 150px; 
      margin-top: 20px; 
     } 

     div.content { 
      margin-left: 180px; 
      min-height: 500px; 
     } 

     div.tile { 
      width: 175px; 
      margin: 0px 10px 10px 0px; 
      height: 100px; 
      background-color: gray; 
      position: relative; 
      padding: 10px; 
     } 

     .headerRow { 
      display: inline-block; 
      background-color: #f3f3f3; 
      border-bottom: solid orange 1px; 
      font-size: 12pt; 
      padding: 8px; 
     } 

     .tableRow { 
      font-size: 12pt; 
      background-color: white; 
      padding: 10px; 
      border-bottom: solid #cfcfcf 1px; 
      cursor: pointer; 
     } 

     .headerCol, .dataCol { 
      display: inline-block; 
      cursor: pointer; 
     } 

     .titleCol { 
      width: 250px; 
     } 

     .dateCol { 
      width: 150px; 
     } 

     .btnTileView, .btnTableView { 
      float: right; 
      cursor: pointer; 
      text-decoration: underline; 
      margin-right: 20px; 
     } 

     </style> 
    </head> 
    <body> 
     <div> 
     <div class="controls"> 
      <span class="btnTableView">Table mode</span> 
      <span class="btnTileView">Tile mode</span> 
     </div> 
     <div class="content"> 
      <div class="tileContent"> 
       <div class="tile"> 
        item 1 
       </div> 
       <div class="tile"> 
        item 2 
       </div> 
       <div class="tile"> 
        item 3 
       </div> 
       <div class="tile"> 
        item 4 
       </div> 
       <div class="tile"> 
        item 5 
       </div> 
       <div class="tile"> 
        item 6 
       </div> 
       <div class="tile"> 
        item 7 
       </div> 
       <div class="tile"> 
        item 8 
       </div> 
       <div class="tile"> 
        item 9 
       </div> 
       <div class="tile"> 
        item 10 
       </div> 
      </div> 
      <div class="tableWrapper"> 
       <div class="headerRow"> 
        <div id="tableTitleHeader" class="headerCol titleCol"><span>Title</span></div> 
        <div id="tableDateHeader" class="headerCol dateCol"><span>Uploaded</span></div> 
       </div> 
       <div class="tableContent"> 
        <div class="tableRow"> 
        <span class="dataCol titleCol">item 1</span> 
        <span class="dataCol dateCol">8/1/2013</span> 
        <div class="tableRow"> 
        <span class="dataCol titleCol">item 2</span> 
        <span class="dataCol dateCol">8/2/2013</span> 
        </div> 
        <div class="tableRow"> 
        <span class="dataCol titleCol">item 3</span> 
        <span class="dataCol dateCol">8/3/2013</span> 
        </div> 
        <div class="tableRow"> 
        <span class="dataCol titleCol">item 4</span> 
        <span class="dataCol dateCol">8/4/2013</span> 
        </div> 
        <div class="tableRow"> 
        <span class="dataCol titleCol">item 5</span> 
        <span class="dataCol dateCol">8/5/2013</span> 
        </div> 
        <div class="tableRow"> 
        <span class="dataCol titleCol">item 6</span> 
        <span class="dataCol dateCol">8/6/2013</span> 
        </div> 
        <div class="tableRow"> 
        <span class="dataCol titleCol">item 7</span> 
        <span class="dataCol dateCol">8/7/2013</span> 
        </div> 
        <div class="tableRow"> 
        <span class="dataCol titleCol">item 8</span> 
        <span class="dataCol dateCol">8/8/2013</span> 
        </div> 
       </div> 
     </div> 
     </div> 
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
     <script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $(".tileContent").isotope({ 
        itemSelector : ".tile", 
        layoutMode : "fitRows", 
        animationEngine: "best-available", 

        animationOptions: { 
        duration: 500, 
        easing: "linear", 
        queue: false 
        } 
       }); 

       $(".tableContent").isotope({ 
        itemSelector : ".tableRow", 
        layoutMode : "straightDown", 
        animationEngine: "best-available", 

        animationOptions: { 
        duration: 500, 
        easing: "linear", 
        queue: false 
        } 
       }); 

       $(".tileContent").show(); 
       $(".tableWrapper").hide(); 

       $(".btnTileView").click(function() { 
        $(".tileContent").show(); 
        $(".tableWrapper").hide(); 
       }); 

       $(".btnTableView").click(function() { 
        $(".tableWrapper").show(); 
        $(".tileContent").hide(); 
       }); 
      }); 
     </script> 
     </div> 
    </body> 
</html>

출처

2013-09-04 d512

호출 시도 레이아웃 작업 (demo fiddle) :

$(".btnTileView").click(function() { 
    $(".tileContent").show(); 
    $(".tableWrapper").hide(); 
    $(".tileContent").isotope('reLayout'); 
}); 

$(".btnTableView").click(function() { 
    $(".tableWrapper").show(); 
    $(".tileContent").hide(); 
    $(".tableContent").isotope('reLayout'); 
});

업데이트 :

나는이 좀 더 놀고 있었는데 및 실현 당신은 컨테이너에 크기가 없습니다.

는 (복수에 단일 열) 시각적 레이아웃의 일부를 피하기 같은 것을 시도하려는 경우,

fiddle with container size

당신은 여전히 레이아웃 작업을 할 것을하지만 경우에 따라 어떤 위치 변경 것 필요하다. 어떤 일이 일어나는지 시각화하는 데 도움이되는 한 가지 방법은 포함하는 요소 중 일부에 테두리를 추가하고 창 크기를 조정할 때 크기를 조정하는 방법을 관찰하는 것입니다.

CSS 변경 :

div.content { 
    margin-left: 180px; 
    min-height: 500px; 
    position: relative; 
} 

.tileContent, .tableWrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

출처

2013-09-04 04:48:02 dc5

최고, 대단히 감사합니다.나는 쉬운 해결책이 있기를 정말로 바라고 있었다. – d512

@ user1334007 컨테이너 크기에 대한 추가 정보로 답변이 업데이트되었습니다. – dc5

여러보기가있는 JQuery 동위 원소 표시 문제

답변

관련 문제