동위 원소 아이템이 점프하고 있습니다.

Question

저는 워드 프레스와 동위 원소를 사용하여 포트폴리오 웹 사이트를 만들고 있습니다. 어떤 이유로 동위 원소 항목이 정렬 될 때마다 그들은 나중에 불쾌한 점프를합니다. 여기

http://jsfiddle.net/tovly/8k6hyyzL/

문제를 보여주는 동영상입니다 : 여기에 문제를 설명하는 jsfiddle이다

는

https://drive.google.com/file/d/0B5OxMCWiLhrMcmZUYm56YkFzdGs/view?usp=sharing

문제는 각 타일 정렬 처음 발생합니다. 어떻게 이런 일이 일어나지 않게 할 수 있습니까? 이 내 동위 원소의 설정은 다음과 같습니다

$container.isotope({ 
     itemSelector : '.item', 
     layoutMode : 'masonry', 
     masonry: { 
       isFitWidth: true, 
      columnWidth: 60, 
      gutter: 10 

     } 
    }); 

Answer 1

나는 동위 원소 항목에 추가 한 변환 전이를 제거하여 내 문제를 해결했습니다. 나는 또한 그 전환에서 "! important"를 제거했다. 내가 추가 한 전이 (호버 전이)는 이제 동위 원소가 전이를 추가하면 잘 작동하는 것 같습니다.

올드 비 작동 코드 :

.isotope-item { 
    transition: transform 0.5s, opacity 0.5s, background-color 0.25s linear, 
    border-color 0.25s linear !important; 
} 

새로운 작업 코드 :

.isotope-item { 
    /*I removed "transform 0.5s" and "!important"*/ 
    transition: opacity 0.5s, background-color 0.25s linear, border-color 0.25s linear; 
} 

나는 좀 더 쉽게 문제를 해결하는 데 도움이 할 수있는 옷을 벗었 jsfiddle을 만들었습니다. 고정 라인은 jsfiddle 비디오 이상 사용되어 왔었다 것이다 라인 10

https://jsfiddle.net/tovly/w0avjdx9/

Answer 2

먼저이 문제를 워드 프레스와 관심 대상. 이것은 jQuery 문제입니다. 동위 원소 코드를 두 번 추가합니다. 첫 번째 추가 삭제. 원래 JS 당신이 게시 바이올린의 모든 CSS를 제거하고 동위 원소 인스턴스를 변경하는 경우 fitRows를 사용하여 벽돌을 제거

jQuery(function ($) { 

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts 

    // (!) deleting start from here 
    $container.isotope({ 
     itemSelector : '.item', 
     layoutMode : 'masonry', 
     masonry: { 
       isFitWidth: true, 
      columnWidth: 60, 
      gutter: 10 

     } 
    }); 
    // (!) deleting end of here 

    //Add the class selected to the item that is clicked, and remove from the others 
    var $optionSets = $('#filters'), 
    $optionLinks = $optionSets.find('a'); 

    if("onhashchange" in window) { 
    // ... continue 

Answer 3

나는이 답변으로 문제가 해결되지 않습니다 알고

,하지만 - : 그래서 당신의 파일을 편집 대신 점프가 없습니다.

$container.isotope({ 
    itemSelector : '.item', 
    layoutMode : 'fitRows' 
}); 

이것은 사용중인 CSS를 의미하며 석조 시설 조합이 잘 작동하지 않을 수도 있습니다.

여분의 HTML과 CSS가 많이 있고 자바 스크립트의 들여 쓰기가 일관성이 없기 때문에 계속 진행되는 것을 읽기가 어렵습니다. 당신이 그것을 청소하고 필터링에 필수적인 부분 만 게시한다면, 나는 더 나은 모습을 취할 수 있습니다.