위치 Isotope로드 컨테이너 내의 더 많은 버튼

"더 자세히로드"버튼이 모든 요소 다음에 그 그리드 내에 배치되는 Isotope로 이미지 그리드를 작성하려고합니다.위치 Isotope로드 컨테이너 내의 더 많은 버튼

버튼을 배치하는 것은 문제가되지 않았고 새 요소를 삽입하지도 않았지만 요소 뒤에 버튼이 항상 있는지 어떻게 확인할 수 있는지 전혀 알 수 없습니다. 현재 코드에서 "추가로드"버튼을 클릭하면 더 많은 요소가 버튼 뒤에 삽입됩니다.

어떻게 생각하나요? 여기에 내가 가지고있는 것은 먼 곳 : http://goo.gl/JbXkzC

고마워!

출처

2015-01-11 user2148363

먼저, 동위 원소 레이아웃에 포함되도록 버튼을 동위 원소 항목으로 사용할 수 없으므로 버튼이 동위 원소 항목이 될 수 없습니다.

codepen

HTML :

<div class="container"> 
<div class="row"> 
<h1>Isotope Image Grid</h1> 
<!--<button class="" id="button">Load More</button>--> 
</div> 
</div> 
<div class="container-fluid"> 
<div class="row-fluid"> 
<div class="col-xs-12"> 
    <div class="item"> 
    <img src="" alt="" /> 
    </div> 
    <div class="item"> 
    <img src="" alt="" /> 
    </div> 
    <div class="item"> 
    <img src="" alt="" /> 
    </div> 
    <div class="item"> 
    <img src="" alt="" /> 
    </div> 
    <div class="item"> 
    <img src="" alt="" /> 
    </div> 
    <div class="item"> 
    <img src="" alt="" /> 
    </div> 
    <div class="item"> 
    <img src="" alt="" /> 
    </div> 
    <div class="item"> 
    <img src="" alt="" /> 
    </div> 
    <div class="item"> 
    <img src="" alt="" /> 
    </div>  
</div><button id="button">Load More</button> 
</div> 
</div>

당신은 동위 원소의 stamp option 있지만 가장 쉬운 방법은 COL-XS-12에서 그리고 열 유체로 이동하고 약간 버튼 CSS를 변경하는 것입니다 사용할 수 있습니다

CSS :이 유일한 해결책 "로드를 더"를 제거하는 새로운 요소 APPEND되고 나면 버튼을 다시는-추가처럼

#button { 
    display:inline-block; 
width: 25%; 
height: 180px; 
color: #fff; 
font-size: 18px; 
background-color: #C0392B; 
border: 0px; 
}

출처

2015-01-12 02:04:36 Macsupport

감사합니다. @Macsupport, 불행히도 버튼을 제공 한 솔루션이 실제로 유체 격자 안에 있지만 새로운 행인 것 같아 보이지 않습니다. [스크린 샷] – user2148363

정확한 포인트는 물론 동위 원소 그리드 외부에 설정되어 있기 때문에 스크린 샷처럼 보입니다! 버튼이 동위 원소 항목이라면 이전에 설명한 것처럼 우표를 만들거나 동위 원소 항목이없는 한 정적이지 않습니다. 여기는 우표 [codepen] (http://codepen.io/macsupport/pen/emgaEP)입니다. 이러한 솔루션 중 하나가 없으면 원하는 것은 어렵습니다. – Macsupport

그 점을 명확히 해 주셔서 감사합니다. 나는 물건을 찍으려고했으나 몇 가지 다른 자료를 읽은 후, 물건을 아래쪽 구석에 찍히는 것은 불가능합니다. 다른 해결책을 찾았습니다. 여기에 제가 잠시 후에 게시하겠습니다. – user2148363

이 보이는 에드.

$('#portfolioGrid').on("click", ".loadMore", function(addIsotopeItems){ 

    addIsotopeItems.preventDefault(); 

    var OElem = document.getElementById("button"); 
    OElem.parentNode.removeChild(OElem); 

    var di="<div class=\'item item-new\'><img src=\'\'></img></div><button class=\'item loadMore\' id=\'button\'>Load More</button>"; 

    newItems = $(di).appendTo('#portfolioGrid'); 
    $("#portfolioGrid").isotope('insert', newItems); 
});

전체 코드 here on CodePen.

출처

2015-01-13 16:25:11 user2148363

위치 Isotope로드 컨테이너 내의 더 많은 버튼

답변

관련 문제